vue自定义指令clickoutside使用以及扩展用法

忘是亡心i 2022-10-08 11:20 543阅读 0赞

<template>
      <div class="testPage">
           <div class="block" @click="onShow" v-click-outside="closeDialog">111</div>
           <div class="show" v-if="flag">QQQQQQQQQQ</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>