Vue2.js:v-click-outside自定义指令和vue-click-outside监听鼠标点击元素外部区域事件
2023-09-14 09:07:19 时间
自定义指令 v-click-outside
文档
v-click-outside 可以实现点击外部区域才触发事件
实现代码
<template>
<div class="TestClickOutside">
<div
class="TestClickOutside__inner"
v-click-outside="handleClickOutside"
></div>
</div>
</template>
<script>
// created at 2022-08-25
export 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
文档
安装
$ npm install vue-click-outside
<template>
<div class="TestClickOutside">
<div
class="TestClickOutside__inner"
v-click-outside="handleClickOutside"
></div>
</div>
</template>
<script>
// created at 2022-08-25
import 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>
相关文章
- MongoVUE_Vue.js+Flask+MongoDB
- js面试题及答案2020_JS面试题大全
- 不用React Vue,只用原生JS,如何开发单页面应用?
- vue-cli 初始----安装运行Vue项目
- js数组转对象_js数组去重的四种方法
- Linux下安装Node.js并国内源(淘宝)
- vue.js客服系统实时聊天项目开发(二十一)vue项目中引入静态资源
- 网站在线客服系统实时语音视频聊天实战开发,利用peerjs vue.js实现webRTC网页音视频客服系统
- Vue提示框组件vue-notification使用实例演示
- JS模块化编程简介
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- 细说 Vue.js 3.2 关于响应式部分的优化
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- js自定义事件及事件交互原理概述(一)
- js按指定格式显示日期时间的样式代码