vue v-blur

v-blur是一个Vue.js的指令，用于在页面中添加半透明遮罩效果。通过设置`blurConfig`对象的`isBlurred`属性来控制内容的可见性。可以通过点击按钮来切换内容的可见性。指令还支持自定义透明度和过渡效果。

下面是一个使用v-blur指令的例子：

<template>
  <button @click="blurConfig.isBlurred = !blurConfig.isBlurred">Toggle the content visibility</button>
  <p v-blur="blurConfig">Blurred content</p>
</template>

<script>
export default {
  data () {
    return {
      blurConfig: {
        isBlurred: false,
        opacity: 0.3,
        filter: 'blur(1.2px)',
        transition: 'all .3s linear'
      }
    }
  }
}
</script>