使用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（以確定何時應用這些樣式）的對象。