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