https://github.com/ndelvalle/v-blur
⬜️ Vue directive to blur an element dynamically
https://github.com/ndelvalle/v-blur
vue vue-directive vuejs
Last synced: 8 months ago
JSON representation
⬜️ Vue directive to blur an element dynamically
- Host: GitHub
- URL: https://github.com/ndelvalle/v-blur
- Owner: ndelvalle
- License: mit
- Created: 2017-07-08T16:02:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-07T10:58:27.000Z (almost 3 years ago)
- Last Synced: 2024-10-12T09:23:48.104Z (about 1 year ago)
- Topics: vue, vue-directive, vuejs
- Language: JavaScript
- Homepage:
- Size: 4.47 MB
- Stars: 184
- Watchers: 4
- Forks: 7
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - v-blur - Vue directive to blur an element dynamically ` 📝 2 months ago` (UI Utilities [🔝](#readme))
- awesome-vue-zh - V-模糊 - Vue指令动态模糊元素 (UI实用程序 / 杂)
- awesome-vue - v-blur - Vue directive to blur an element dynamically (Components & Libraries / UI Utilities)
- awesome-vue - v-blur ★85 - Vue directive to blur an element dynamically (UI Utilities / Miscellaneous)
- awesome-vue - v-blur - Vue directive to blur an element dynamically (UI Utilities / Miscellaneous)
README
# v-blur
[ ](https://app.codeship.com/projects/231348)
[](https://coveralls.io/github/ndelvalle/v-blur?branch=master)
[](https://david-dm.org/ndelvalle/v-blur)
[](https://david-dm.org/ndelvalle/v-blur?type=dev)
[](https://www.codacy.com/app/ndelvalle/v-blur?utm_source=github.com&utm_medium=referral&utm_content=ndelvalle/v-blur&utm_campaign=Badge_Grade)
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
```bash
$ npm install --save v-blur
```
```bash
$ 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](https://www.w3schools.com/cssref/css3_pr_opacity.asp), [filter](https://www.w3schools.com/jsref/prop_style_filter.asp) and [transition](https://www.w3schools.com/jsref/prop_style_transition.asp). 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
```js
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'
// })
```
```js
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'
}
}
}
}
};
```
## Example
[](https://codesandbox.io/s/823o069zoj?module=%2Fsrc%2Fcomponents%2FHelloWorld.vue)
## License
[MIT License](https://github.com/ndelvalle/v-blur/blob/master/LICENSE)
## Style guide
[](https://github.com/feross/standard)