介紹
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(以確定何時應用這些樣式)的對象。