vue3 自定义指令 v-click-outside

想用v-click-oustside指令，但查询后发现，只有element plus框架才有，其余的如果想用，需要自己创建指令

仅生成一个指令，可以直接在main.js中添加

• 在main.js中添加指令

const app = createApp(App)
app.directive('click-outside', {
	beforeMount(el, binding) {
		el.clickOutsideEvent = function (event) {
			if (!(el === event.target || el.contains(event.target))) {
				binding.value(event);
			}
		};
		document.addEventListener('click', el.clickOutsideEvent);
	},
	unmounted(el) {
		document.removeEventListener('click', el.clickOutsideEvent);
	}
});

使用

• html

<div  v-click-outside="outsideClick">
</div>
const outsideClick = (event)=>{
}

• js

const outsideClick = (event)=>{
// 如果想要在某些dom以内不去触发这个方法 
if (e.target.id == 'xxxxx') return
// 自己的逻辑...
}

方法2 npm

• 下载依赖

npm install --save v-click-outside

• 使用

// main.js
import Vue from 'vue'
import vClickOutside from 'v-click-outside'

Vue.use(vClickOutside)
// html
<div v-click-outside="onClickOutside"></div>