自定义指令 v-click-outside
文档
https://v2./v2/guide/custom-directive.html
v-click-outside 可以实现点击外部区域才触发事件
实现代码
<template><div class="TestClickOutside"><divclass="TestClickOutside__inner"v-click-outside="handleClickOutside"></div></div></template><script>// created at -08-25export default {name: 'TestClickOutside',props: {},components: {},data() {return {}},directives: {'click-outside': {bind(el, binding, vnode) {console.log('bind')function eventHandler(e) {if (el.contains(e.target)) {return false}// 如果绑定的参数是函数，正常情况也应该是函数，执行if (binding.value && typeof binding.value === 'function') {binding.value(e)}}// 用于销毁前注销事件监听el.__click_outside__ = eventHandler// 添加事件监听document.addEventListener('click', eventHandler)},unbind(el, binding, vnode) {console.log('unbind')// 移除事件监听document.removeEventListener('click', el.__click_outside__)// 删除无用属性delete el.__click_outside__},},},methods: {handleClickOutside() {console.log('handleClickOutside')},},created() {},}</script><style lang="less"></style><style lang="less" scoped>.TestClickOutside__inner {width: 100px;height: 100px;background-color: #666666;}</style>
vue-click-outside
文档
github /vue-bulma/click-outside
安装
$ npm install vue-click-outside
<template><div class="TestClickOutside"><divclass="TestClickOutside__inner"v-click-outside="handleClickOutside"></div></div></template><script>// created at -08-25import ClickOutside from 'vue-click-outside'export default {name: 'TestClickOutside',props: {},components: {},data() {return {}},directives: {ClickOutside },computed: {},methods: {handleClickOutside() {console.log('handleClickOutside')},},created() {},}</script><style lang="less"></style><style lang="less" scoped>.TestClickOutside__inner {width: 100px;height: 100px;background-color: #666666;}</style>
参考
vue 解除鼠标的监听事件的方法
