首页 前端知识 Vue 自定义指令:ClickOutside(点击当前区域之外的位置)

Vue 自定义指令:ClickOutside(点击当前区域之外的位置)

2024-06-22 10:06:16 前端知识 前端哥 131 701 我要收藏

在util文件夹下生成clickoutside.js

let cache = {};
let key = 1;
export default {
    inserted(el, binding) {
        el.outsideKey = key++;
        const self = {};
        self.documentHandler = (e) => {
        if (el.contains(e.target)) {
            return false;
        }
        if (binding.value) {
            binding.value(e);
        }
        return true;
        };
        cache[el.outsideKey] = self;
        document.addEventListener('click', self.documentHandler);
    },
    unbind(el) {
        const self = cache[el.outsideKey];
        document.removeEventListener('click', self.documentHandler);
        delete cache[el.outsideKey];
    },
};

使用clickoutside

<template>
    <div v-clickoutside="onClickOutside"></div>
</template>
<script>
import Clickoutside from "@/util/clickoutside";

export default {
    directives: { Clickoutside },
    methods: {
        onClickOutside() {
            // ...
        }
    }   
}
</script>

vue3的使用方法参考Vue3 自定义指令:ClickOutside(点击当前区域之外的位置)-CSDN博客

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13320.html
标签
评论
发布的文章

JMeter断言之JSON断言

2024-07-22 01:07:18

39 | XML、JSON、YAML比较

2024-07-22 01:07:13

String和JSON相互转换

2024-07-22 01:07:11

npm 安装报错

2024-07-22 01:07:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!