vue给元素添加指令_Vue指令动态模糊元素

vue给元素添加指令

v模糊 (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.

Vue指令可动态模糊元素。 对于部分隐藏元素很有用，当内容还没准备好时，可以与微调器一起使用它。

安装 (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.

绑定值可以是布尔值或对象。 如果提供了布尔值，则伪指令将不透明度 ， 过滤器和过渡使用默认值。 要使用自定义配置，可以提供具有这些属性以及isBlurred (以确定何时应用这些样式)的对象。

绑定对象属性 (Binding object attributes)

option	default	type
isBlurred	false	boolean
opacity	0.5	number
filter	'blur(1.5px)'	string
transition	'all .2s linear'	string

选项	默认	类型
isBlurred	假	布尔值
不透明	0.5	数
过滤	'模糊(1.5px)'	串
过渡	'所有.2s线性'	串

用 (Use)

import Vue from 'vue'
import vBlur from 'v-blur'

Vue.use(vBlur)

<script>
  export default {
      data () {
        return {
          isBlurred: true, // activate and deactivate blur directive example 1
          
          blurConfig: {
            isBlurred: false, // activate and deactivate blur directive example 2
            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)

翻译自: https://vuejsexamples.com/vue-directive-to-blur-an-element-dynamically/

vue给元素添加指令