ndelvalle / V Blur
Licence: mit
⬜️ Vue directive to blur an element dynamically
Stars: ✭ 173
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to V Blur
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (+65.32%)
Mutual labels: vue-directive
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-76.3%)
Mutual labels: vue-directive
Vue Scroll Reveal
A Vue directive to wrap @jlmake's excellent ScrollReveal library.
Stars: ✭ 138 (-20.23%)
Mutual labels: vue-directive
Vue Quill Editor
🍡@quilljs editor component for @vuejs
Stars: ✭ 6,874 (+3873.41%)
Mutual labels: vue-directive
V Animate Css
The easiest to implement Vue directive for Animate.css
Stars: ✭ 59 (-65.9%)
Mutual labels: vue-directive
v-lazy-img
simplistic vue.js directive for image lazy loading
Stars: ✭ 25 (-85.55%)
Mutual labels: vue-directive
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+1122.54%)
Mutual labels: vue-directive
Vue Esc
🏃 Vue.js directive to add a document event listener on escape keyup.
Stars: ✭ 33 (-80.92%)
Mutual labels: vue-directive
Vue.resize
Vue directive to detect resize events with deboucing and throttling capacity.
Stars: ✭ 318 (+83.82%)
Mutual labels: vue-directive
V Click Outside
🔲 Vue directive to react on clicks outside an element without stopping the event propagation
Stars: ✭ 755 (+336.42%)
Mutual labels: vue-directive
Vue Responsive
A plugin for responsive handling with vue.js
Stars: ✭ 86 (-50.29%)
Mutual labels: vue-directive
Vue Awesome Mui
🏆Mui component for Vue.js(1.x ~ 2.x)
Stars: ✭ 307 (+77.46%)
Mutual labels: vue-directive
Vue Prlx
🔮 Vue.js parallax directive you were looking for (can animate translate & background-position)
Stars: ✭ 140 (-19.08%)
Mutual labels: vue-directive
Vue Ripple Directive
Material Ripple Effect as Vue Directive.
Stars: ✭ 266 (+53.76%)
Mutual labels: vue-directive
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+6878.03%)
Mutual labels: vue-directive
Vue Inputmask
Vue.js directive to add inputmask library to your inputs (vanilla javascript).
Stars: ✭ 110 (-36.42%)
Mutual labels: vue-directive
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
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
License
Style guide
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].