一、首先需要用到ElementUI里面的ClickOutside自定义指令(如果已安装可以调到第二步)
1.安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
2.引入
引入 Element
你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
具体方法查看Element快速上手
Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
https://element.eleme.cn/#/zh-CN/component/quickstart
二、导入
import clickoutside from 'element-ui/src/utils/clickoutside';
三、映射
directives: { clickoutside },
四、绑定自定义指令
<div v-clickOutside="handler">
text
</div>
五、编写逻辑
handler() {
console.log('text以外的区域被点击了')
}
六、全部代码
<template>
<div>
<div v-clickoutside="handler">text</div>
</div>
</template>
<script>
import clickoutside from "element-ui/src/utils/clickoutside";
export default {
directives: { clickoutside },
data() {
return {};
},
created() {},
methods: {
handler() {
console.log("text以外被点击了");
},
},
};
</script>