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)
// 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>
export default {
data () {
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: 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
