vue自定义指令 click,
在一般业务中监听的最多的就是点击事件，但是在一些业务比如警报和流行音乐效果时，需要监听在元素外部的点击来关闭弹窗。
原始实现
下面是两种常见的模态框的实现方式
方案一：默认点击都是放在冒泡阶段，只要在内容区域上添加点击的阻止冒泡即可
div class=cover @click=close
！-阻止冒泡-
div class= content @ click。停止模式内容/分区
/div
方案二：通过代码判断点击触发的数字正射影像图是否在内容区域内
div class= cover @ click= handle click
div class=content ref=content 模式内容/div
/div
手柄点击(e) {
让clickOut=true
让温度=e .目标
做{
if (temp===this .$refs.content) {
clickOut=false
破裂
}
temp=temp.parentElement
} while (temp！==document.documentElement)
console.log(点击输出)
}
指令实现
上面的代码可以解决全屏的模态框点击外部区域关闭。但是还有一种流行音乐的弹出，这种弹出的外部区域不在本组件内，想要实现这种弹出的点击外部区域关闭用上面的方式二也是可以的，只需把安装好的阶段把手柄点击事件添加到身体，在销毁前上解绑身体上的点击时间就就可以了。
如果多个组件需要实现这点击外部区域关闭的效果，可以通过某视频剪辑软件的指令来进行封装
实现弹窗
div class=cover
div class= content v-out-click=关闭模式内容/div
/div
实现弹出
button @click=popIsShow=true 显示气泡/按钮
我是流行文本/分区
指令代码的具体内容如下。有一点比较难受的是指令里面没有地方能存放变量，只好把把这些变量放到了数字正射影像图上了。还有就是在使用的时候要加上五-的前缀，指令的名字不用带上五-
从导入胜过他人./directive/out-click.js
Vue.directive(outClick.name，outClick)
const KEY_OUT=_out_click
const KEY _ OUT _ EVENT= _ OUT _ click _ EVENT
const KEY_IN=_in_click
const KEY_FLAG=_in_out_flag
函数removeEvent(el，binding，vnode) {
el.removeEventListener(click ，el[KEY_IN]，false)
窗户。removeeventlistener( click ，el[KEY_OUT]，false)
删除输入
删除El[键出]
删除El[关键事件]
删除El[关键标志]
}
函数initEvent(el，binding，vnode) {
//setTimeout 0:忽略点击外部的按钮初始化该组件时，触发的原点点击
setTimeout(()={
el[KEY_OUT]=()=outClick(el)
el[KEY_IN]=()=inClick(el)
El[键输出事件]=绑定。价值
el.addEventListener(click ，el[KEY_IN]，false)
window.addEventListener(click ，el[KEY_OUT]，false)
}, 0)
}
函数因克里克(el) {
//通过事件捕获的顺序作为标志位
//最好不要使用阻止冒泡来实现，那样会影响其他的点击无法触发
el[KEY_FLAG]=1
}
函数突出(el) {
如果(!El[KEY _ FLAG]El[KEY _ OUT _ EVENT]){
El[键输出事件]()
}
删除El[关键标志]
}
导出默认值{
名称："向外点击",
更新：(el，binding，vnode)={
如果(绑定。值===绑定。旧值){
返回
}
removeEvent(el，binding，vnode)
initEvent(el，binding，vnode)
},
绑定：initEvent，
解除绑定：移除事件
}
以上就是某视频剪辑软件指令实现胜出的示例的详细内容，更多关于某视频剪辑软件指令实现胜出的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。