目录自定义指令clickOutside首先我们先看看Vue官方的文档clickoutside 这个指令用在哪里呢?写法自定义指令clickoutside使用及扩展用法自定义指令cli
这个指令通过vue的自定义指令的钩子函数实现。
emmmm 看着好像有点困难,没关系官方文档也给出了例子。
现在应该就明白了不少了吧。
比如
export default {
bind (el, binding, vnode) {
function documentHandler (e) {
// el 包含其触发的元素 那当然不能触发啦
if (el.contains(e.target)) {
return false;
}
// 满足上面条件, 并且expression 的值不为空 触发(希望value是个函数)
if (binding.expression) {
// 调用自定义指令传来的函数,e是事件原对象 作为参数(为什么传e 因为有些情况需要把这个对象抛出方便用户的操作)
binding.value(e);
}
}
// 嗯??? 这么写有什么作用吗? 当然有了,如果你想取消事件的监听,那么是不是需要这个函数。
el.__vueClickOutside__ = documentHandler;
// 在document上监听事件
document.addEventListener('click', documentHandler);
},
update () {
},
unbind (el, binding) {
// 取消事件监听(el.__vueClickOutside 派上用场了吧)
document.removeEventListener('click', el.__vueClickOutside__);
// 既然都取消了 那么这个属性就没必要存在了
delete el.__vueClickOutside__;
}
};
下拉框组件上的引用
呐 大功告成!!!
<template>
<div class="testPage">
<div class="block" @click="onShow" v-click-outside="closeDialog">111</div>
<div class="show" v-if="flag">QQQQQQQQQQ</div>
<!-- <input v-focus> -->
<!-- <el-input v-focus type="text" /> -->
<!-- <div v-click-outside="closeDialog">222</div> -->
</div>
</template>
<script>
// import global from '../common/global';
export default {
data() {
return {
flag:false,
list:[{id:'1',name:'张三',seen:false},{id:'2',name:'李四',seen:false}],
};
},
components: {},
created() {},
methods: {
onShow(){
this.flag=true;
},
closeDialog(){
this.flag=! this.flag;
},
handleIconClick(ev) {
window.open('https://www.baidu.com/','_self');
},
onClick(item,index){
console.log(item,index)
// console.log(this.list)
item.seen=true;
this.$set(this.list,index,item);
console.log(this.list)
}
}
,
directives: {
clickOutside : {
bind(el, binding, vnode) {
function clickHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e);
}
}
el.__vueClickOutside__ = clickHandler;
document.addEventListener('click', clickHandler);
},
update() {},
unbind(el, binding) {
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
}
}
};
</script>
<style lang="less" scoped>
.testPage {
width: 100%;
height: 100%;
.el-input--width{
border-radius: 20px;
width: 100px;
}
.block{
width: 100px;
height: 100px;
background-color: #f90;
}
}
</style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue中的自定义指令clickOutside
本文链接: https://www.lsjlt.com/news/150158.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0