Vue自定义指令v-click-outside，及指令生命周期用法bind、unbind；el.contains()方法（摘录）

本文主要是介绍Vue自定义指令v-click-outside，及指令生命周期用法bind、unbind；el.contains()方法（摘录），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template><div v-click-outside>//自定义指令名称：v-click-outside<input type="text" :value="formatDate"><div v-if="isVisibale">内容</div></div>
</template><script>
import * as utils from '@/util'
export default {name: 'DataPicker',data () {return {isVisibale: false}},directives: {clickOutside: {//自定义指令：clickOutsidebind (el, bindings, vnode) {//自定义指令生命周期：bind ；参数：el, bindings, vnodelet handler = (e) => {if (el.contains(e.target)) {if (!vnode.context.isVisibale) {vnode.context.focus()}} else {if (vnode.context.isVisibale) {vnode.context.blur()}}}el.handler = handlerdocument.addEventListener('click', handler)},unbind (el) {//自定义指令生命周期：unbind document.removeEventListener('click', el.handler)}}},props: {value: {type: Date,default: () => new Date()}},computed: {formatDate () {let {year, month, day} = utils.getYearMonthDay(this.value)return `${year}-${month}-${day}`}},methods: {focus () {this.isVisibale = true},blur () {this.isVisibale = false}}
}
</script>

更多请看视屏，原文25~30分钟处

这篇关于Vue自定义指令v-click-outside，及指令生命周期用法bind、unbind；el.contains()方法（摘录）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---