vue中的自定義指令clickOutside

更新時(shí)間：2022年05月30日 11:53:57 作者：努力成為一個(gè)優(yōu)秀的前端

這篇文章主要介紹了vue中的自定義指令clickOutside，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

自定義指令clickOutside

這個(gè)指令通過vue的自定義指令的鉤子函數(shù)實(shí)現(xiàn)。

首先我們先看看vue官方的文檔

emmmm 看著好像有點(diǎn)困難，沒關(guān)系官方文檔也給出了例子。

現(xiàn)在應(yīng)該就明白了不少了吧。

clickoutside 這個(gè)指令用在哪里呢？

比如

寫法

export default {
    bind (el, binding, vnode) {
        function documentHandler (e) {
        // el 包含其觸發(fā)的元素 那當(dāng)然不能觸發(fā)啦
            if (el.contains(e.target)) {
                return false;
            }
            // 滿足上面條件， 并且expression 的值不為空 觸發(fā)（希望value是個(gè)函數(shù)）
            if (binding.expression) {
            	//	調(diào)用自定義指令傳來的函數(shù)，e是事件原對(duì)象 作為參數(shù)（為什么傳e 因?yàn)橛行┣闆r需要把這個(gè)對(duì)象拋出方便用戶的操作）
                binding.value(e);
            }
        }
        // 嗯？？？ 這么寫有什么作用嗎？ 當(dāng)然有了，如果你想取消事件的監(jiān)聽，那么是不是需要這個(gè)函數(shù)。
        el.__vueClickOutside__ = documentHandler;
        // 在document上監(jiān)聽事件
        document.addEventListener('click', documentHandler);
    },
    update () {
    },
    unbind (el, binding) {
    // 取消事件監(jiān)聽（el.__vueClickOutside 派上用場(chǎng)了吧）
        document.removeEventListener('click', el.__vueClickOutside__);
        // 既然都取消了 那么這個(gè)屬性就沒必要存在了
        delete el.__vueClickOutside__;
    }
};

下拉框組件上的引用

吶大功告成?。?！

自定義指令clickoutside使用及擴(kuò)展用法

<template>
? <div class="testPage">
? ? ? ?<div class="block" @click="onShow" v-click-outside="closeDialog">111</div>
? ? ? ?<div class="show" v-if="flag">QQQQQQQQQQ</div>
? ? ? ?<!-- <input v-focus> -->
? ? ? ?<!-- <el-input v-focus type="text" /> -->
? ? ? ?<!-- <div v-click-outside="closeDialog">222</div> -->
? </div>
</template>

<script>
// import global from '../common/global';
?
export default {
? data() {
? ? return {
? ? ? flag:false,
? ? ? list:[{id:'1',name:'張三',seen:false},{id:'2',name:'李四',seen:false}],
? ? ? /* input11: '',
? ? ? numberValidateForm: {
? ? ? ? ? age: 0,
? ? ? ? ? height: '175'
? ? ? ? },
? ? ? ? rules_V: {
? ? ? ? ? height: [{ validator: validateHeight, trigger: 'blur' }]
? ? ? ? } */
? ? };
? },
?
? components: {},
? created() {},
? methods: {
? ? onShow(){
? ? ? this.flag=true;
? ? },
? ? closeDialog(){
? ? ? ?this.flag=! this.flag;
? ? },
? ? ?handleIconClick(ev) {
? ? ? ?window.open('https://www.baidu.com/','_self');
? ? },
? ? onClick(item,index){
? ? ? console.log(item,index)
? ? ? // console.log(this.list)
? ? ? item.seen=true;
? ? ? this.$set(this.list,index,item);
? ? ? console.log(this.list)
? ? }
? }
? ,
? directives: {
? clickOutside : {
? bind(el, binding, vnode) {
? ? function clickHandler(e) {
? ? ? if (el.contains(e.target)) {
? ? ? ? return false;
? ? ? }
? ? ? if (binding.expression) {
? ? ? ? binding.value(e);
? ? ? }
? ? }
? ? el.__vueClickOutside__ = clickHandler;
? ? document.addEventListener('click', clickHandler);
? },
? update() {},
? unbind(el, binding) {
? ? document.removeEventListener('click', el.__vueClickOutside__);
? ? delete el.__vueClickOutside__;
? },
? }
}
};
</script>

<style lang="less" scoped>
.testPage {
? width: 100%;
? height: 100%;
? .el-input--width{
? ? border-radius: 20px;
? ? width: 100px;
? }
? .block{
? ? width: 100px;
? ? height: 100px;
? ? background-color: #f90;
? }?
}
</style>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: