vue 自定义指令

参考:自定义指令
常用指令

vue的自定义指令

• 可以vue.directive 全局注册,可以使用directives 进行局部注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//如果想注册局部指令，组件中也接受一个 directives 的选项：
----------------------------------------------------------
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

如何编写一个指令呢?

钩子函数说白了也就是生命周期，即当一个指令绑定到一个元素上时，这个指令内部有5个生命周期事件函数。接下来创建一个案例来看看这几个钩子函数的触发情况：

参数:

<p v-test>这是一段文字</p>
​
export default {
    ... ...
    directives: {
        test: {
              bind () {
                console.log('bind')
              },
              inserted () {
                console.log('inserted')
              },
              update () {
                console.log('update')
              },
              componentUpdated () {
                console.log('componentUpdated')
              },
              unbind () {
                console.log('unbind')
              }
        }
    }
}

例子(1.点击其他地方收起菜单,2图片懒加载)

通过指令来实现点击空白处子菜单隐藏的功能，具体代码如下：

// clickOutside.js
export default {
    bind (el, binding) {
        const self = {} // 定义一个私有变量，方便在unbind中可以解除事件监听
        self.documentHandler = (e) => {
            if (el.contains(e.target)) { // 这里判断绑定的元素是否包含点击元素，如果包含则返回
                return false
            }
            if (binding.value) { // 判断指令中是否绑定了值
                binding.value(e) // 如果绑定了函数则调用那个函数，此处 binding.value就是handleClose方法
            }
            return true
        }
        document.addEventListener('click', self.documentHandler)
    },
    unbind (el) {
        // 解除事件监听
        document.removeEventListener('click', self.documentHandler)
        delete self.documentHandler
    }
}

在组件中使用：

<template>
    <div>
        <div v-show="isShow" v-clickoutside="handleClickOutside" @click="showOrHide">
            子菜单 ... 
        </div>
    </div>
</template>
​
<script>
    import clickoutside from './js/clickOutside'
    
    export default {
        ... ...
        directives: {
            clickoutside
        },
        data() {
            return {
                isShow: true,
            };
        },
        methods: {
            handleOutsideClick () {
                this.isShow = false
            }
        }
    }
</script>

自定义指令来优化图片的加载：图片在加载过程中，未加载完成时使用灰色背景占位，图片加载完后直接显示

<template>
    <div>
        <!-- 参数不可以直接填写url地址-->
        <img v-imgUrl='url' /> 
    </div>
</template>
​
<script>
    export default {
        data () {
            return {
                url: '../src/assets/logo.png'
            }
        }
    }
</script>

// 全局注册
Vue.directive('imgUrl', function (el, binding) {
    el.style.backgroundColor = '#FEFEFE' //设置背景颜色
    var img = new Image()
    img.src = binding.value // binding.value 指令后的参数
    img.onload = function () {
        el.style.backgroundColor = ''
        el.src = binding.value
    }
})