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-blurBinding 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
import Vue from 'vue' import vBlur from 'v-blur' Vue.use(vBlur)<script> export default { data () { return { isBlurred: true, // activate and deactivate blur directive example 1 blurConfig: { isBlurred: false, // activate and deactivate blur directive example 2 opacity: 0.3, filter: 'blur(1.2px)', transition: 'all .3s linear' } } } } }; </script> <template> <!-- Example 1 using just a boolean (Uses default values) --> <div v-blur="isBlurred"></div> <!-- Example 2 using an object (Uses config values) --> <div v-blur="blurConfig"></div> </template>Example
