使用v-blur for Vue.js轻松模糊网页元素 | 前端开源推荐110期

介绍

v-blur 是一个Vue指令，可动态模糊元素，对于部分隐藏元素很有用。

v-blur npm 地址：
https://www.npmjs.com/package/v-blur

使用CSS，使用 blur 属性可以轻松地使内容模糊。但是，如果要动态更改模糊，则必须使用JavaScript更改模糊设置。对于Vue.js应用，有V-Blur库可以帮助我们实现动态模糊效果。这使得更改模糊设置就像添加几行代码一样容易。

安装

npm

<code>$ npm install --save v-blur/<code>

yarn

<code>$ yarn add v-blur/<code>

使用

首先需要在main.js中引入

<code>import Vue from 'vue'
import vBlur from 'v-blur'
 
Vue.use(vBlur)/<code>

在模板中使用

<code>
   
  

 
   
  


/<code>

我用CLI创建了一个示例，效果如下

绑定值配置选项

绑定值可以是布尔值或对象。如果提供了布尔值，该指令将使用默认的 opacity、filter 和 transition 值。要使用自定义配置，可以提供具有这些属性以及 isBlurred（以确定何时应用这些样式）的对象。