经常接到这样的需求,自己实现一个弹窗,点击弹窗以外地方隐藏当前弹窗,抽空安排一下vue自定义指令。
实现思想
- 监听点击事件
- 判断点击事件target会否为当前dom
- 注意取消监听事件
实现过程
- 实现clickoutside .js
const clickoutside = {
bind(el, binding) {
const documentHandler = (e) => {
if (el.contains(e.target)) return false
if (binding.expression) {
binding.value(e)
}
}
el.documentHandler= documentHandler
document.addEventListener('click', documentHandler, false)
},
unbind(el) {
document.removeEventListener('click', el.documentHandler, false)
delete el.documentHandler
}
}
export default clickoutside
- 实现vue中自定义组件的目录index.js
import clickoutside from './clickoutside'
const directives = {
clickoutside
}
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
}
}
- main.js中统一注册自定义指令
import Vue from 'vue'
import App from './App.vue'
import directives from '@/directives/index.js'
Vue.use(directives)
new Vue({
render: h => h(App),
}).$mount('#app')
- 页面使用
<template>
<div class="dom" v-if="isShow" v-clickoutside="()=>{}">
</div>
</template>
<script>
export default {
data(){
return{
isShow: false
}
}
}
</script>
<style lang="less" scoped>
</style>