vue自定义指令两种方式,vue实现自定义指令
这篇文章主要介绍了某视频剪辑软件中的自定义指令单击外部，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
自定义指令单击外部首先我们先看看某视频剪辑软件官方的文档单击外部这个指令用在哪里呢？写法自定义指令单击外部使用及扩展用法
自定义指令clickOutside
这个指令通过某视频剪辑软件的自定义指令的钩子函数实现。
首先我们先看看vue官方的文档
呃看着好像有点困难，没关系官方文档也给出了例子。
现在应该就明白了不少了吧。
clickoutside 这个指令用在哪里呢？
比如
写法
导出默认值{
bind (el，binding，vnode) {
函数文档处理程序{
//el包含其触发的元素那当然不能触发啦
if (el.contains(e.target)) {
返回错误的
}
//满足上面条件，并且表示的值不为空触发（希望价值是个函数)
if (binding.expression) {
//调用自定义指令传来的函数，e是事件原对象作为参数（为什么传e因为有些情况需要把这个对象抛出方便用户的操作)
绑定值(e)和：
}
}
//嗯？这么写有什么作用吗？当然有了，如果你想取消事件的监听，那么是不是需要这个函数。
埃尔. vueclicksoutside _ _=文档处理程序；
//在文件上监听事件
文档。addevent侦听器( click ，文档处理程序)；
},
update () {
},
解除绑定(el，绑定){
//取消事件监听(厄尔._ _ vueclicksoutside派上用场了吧)
文档。removeeventlistener( click ，el ._ _ vueclickoftoutside _ _)；
//既然都取消了那么这个属性就没必要存在了
删除埃尔._ _ vueclicksoutside _ _
}
};
下拉框组件上的引用
呐大功告成！
自定义指令clickoutside使用及扩展用法
模板
div class=testPage
div class= block @ click= on show v-click-outside= close dialog 111/div
div class= show v-if= flag qqqqqq/div
！-输入垂直焦点-
！艾尔输入v-focus type=text/-
！-div v-click-outside=关闭对话框 222/div-
/div
/模板
脚本
//从导入全局./common/global ；
导出默认值{
data() {
返回{
标志：假，
列表：[{id:1 ，名称：张三，seen:false}，{id:2 ，名称：李四，见过：假}],
/*输入11: ,
numberValidateForm: {
年龄：0,
身高："175"
},
规则_V: {
高度：[{ validator: validateHeight，trigger: blur }]
} */
};
},
组件：{},
已创建(){},
方法：{
昂秀(){
this.flag=true
},
closeDialog(){
this.flag=！这个. flag
},
手柄图标点击（电动){
窗户。打开( https://www。百度一下。com/， _ self )；
},
onClick(项目，索引){
console.log(项目，索引)
//console.log(this.list)
item.seen=true
这个. set(this.list，index，item)；
console.log(this.list)
}
}
,
指令：{
单击外部：{
bind(el，binding，vnode) {
函数点击处理程序{
if (el.contains(e.target)) {
返回错误的
}
if (binding.expression) {
绑定值(e)和：
}
}
埃尔. vueclicksoutside _ _=click处理程序；
文档。addevent listener( click ，click handler)；
},
update() {}，
解除绑定(el，绑定){
文档。removeeventlistener( click ，el ._ _ vueclickoftoutside _ _)；
删除埃尔._ _ vueclicksoutside _ _
},
}
}
};
/脚本
style lang=less 范围。测试页{
宽度：100%;
身高：100%;埃尔-输入-宽度
边框半径：20px
宽度：100像素
}。区块{
宽度：100像素
高度：100像素
背景色：# f90
}
}
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。