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

Posted 2022-02-02 秋水不寒

<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>