v-blur
Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other things.
Install
$ npm install --save v-blur
$ yarn add v-blur
Binding value
The binding value can be a Boolean or an Object. If a Boolean is provided, the directive uses default values for opacity, filter and transition. To use a custom configuration, an object with these attributes plus isBlurred
(To determine when to apply these styles) can be provided.
Binding object attributes
option | default | type |
---|---|---|
isBlurred | false | boolean |
opacity | 0.5 | number |
filter | 'blur(1.5px)' | string |
transition | 'all .2s linear' | string |
Use
Vue // Alternatively an options object can be used to set defaults. All of these// options are not required, example:// Vue.use(vBlur, {// opacity: 0.2,// filter: 'blur(1.2px)',// transition: 'all .3s linear'// })
<script> { return // Example 1: // Activate and deactivate blur directive using defaults values // provided in the Vue.use instantiation or by the library. isBlurred: true // Example 2: // Activate and deactivate blur directive providing a local // configuration object. blurConfig: isBlurred: false opacity: 03 filter: 'blur(1.2px)' transition: 'all .3s linear' } };</script> <template> <!-- Example 1 using just a --> <div v-blur="isBlurred"></div> <!-- Example 2 using an --> <div v-blur="blurConfig"></div></template>