Vue模糊元素指令– v-blur

Vue模糊元素指令– v-blur
插件名称 v-blur
发布时间 2020年11月7日
插件作者 ndelvalle

Vue指令,可将模糊效果动态应用于任何元素。

变更日志:

v1.0.4(11/05/2020)

  • 支持默认配置
  • feat(pointer-events)在模糊时禁用userSelect和pointerEvents

安装和下载:

# Yarn
yarn add v-blur

# NPM
$ npm install v-blur

使用

import Vue from 'vue'
import vBlur from 'v-blur'

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

<template>
  <div v-blur="isBlurred"></div>
  <div v-blur="blurConfig"></div>
</template>