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

MIT License

Style guide