[+] BlurBlock

data#252

src/components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     Balloon: typeof import('./components/Balloon.vue')['default']
     Banner: typeof import('./components/Banner.vue')['default']
     BirthdayButton: typeof import('./components/buttons/BirthdayButton.vue')['default']
+    BlurBlock: typeof import('./components/BlurBlock.vue')['default']
     CapDownQuote: typeof import('./components/CapDownQuote.vue')['default']
     ChannelBackupButton: typeof import('./components/buttons/ChannelBackupButton.vue')['default']
     Divider: typeof import('./components/divider.vue')['default']

src/components/BlurBlock.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import {Vue, Component} from 'vue-facing-decorator';
+
+@Component({})
+export default class BlurBlock extends Vue {
+    blur = ""
+    isblur = false
+
+    mounted() {
+        this.blur = 'filter: blur(5px);';
+        this.isblur = true;
+    }
+
+    change() {
+        if (this.isblur) {
+            this.blur = 'filter: none;';
+        }
+        else {
+            this.blur = 'filter: blur(5px);';
+        }
+        this.isblur = !this.isblur;
+    }
+}
+</script>
+
+<template>
+    <div class="blur" v-bind:style="blur" v-on:click="change()">
+        <slot />
+    </div>
+</template>
+
+<style lang="scss">
+@import '../css/colors.sass';
+@import '../css/markdown.sass';
+@import '../css/global.sass';
+@import '../css/motion.scss';
+
+.blur {
+    @extend .markdown-content;
+    transition: all 1s $ease-in-out-cric;
+}
+</style>

src/components/MDX.vue

@@ -7,6 +7,7 @@ import DynamicIcon from "@/components/DynamicIcon.vue";
 import * as Vue from 'vue';
 import {computed, defineComponent} from 'vue';
 import PhotoScroll from './PhotoScroll.vue';
+import BlurBlock from "./BlurBlock.vue";
 
 export default defineComponent({
     name: "MDX",
@@ -36,7 +37,7 @@ export default defineComponent({
                 {
                     renderFunction.value?.({
                         components: {
-                            PhotoScroll, ChannelBackupButton, CapDownQuote, BackupButtons, DynamicIcon, Banner
+                            PhotoScroll, ChannelBackupButton, CapDownQuote, BackupButtons, DynamicIcon, Banner, BlurBlock
                         }
                     })
                 }