Skip to content

⬜️ Vue directive to blur an element dynamically

License

Notifications You must be signed in to change notification settings

ndelvalle/v-blur

Repository files navigation

v-blur

Codeship Status for ndelvalle/v-blur Coverage Status dependencies Status devDependencies Status Codacy Badge

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

Edit Vue Template v-blur

License

MIT License

Style guide

Standard - JavaScript Style Guide