vue自定义指令的添加

vue自定义指令的添加

<template>
  <div v-cloak v-clickoutside="outsideClose" class="dropmain">
    <div @click="show = !show" class="drop">
      测试下拉菜单
    </div>
    <div class="dropdown" v-show="show">
      <P>点击下拉菜单内容，点击外部区域可关闭下拉菜单</P>
    </div>
  </div>
</template>


<script>
import { clickoutSide } from '@utils/directive'
  export default {
    data() {
      return {
        show: false,
      }
    },
 directives: {
     clickoutSide 
    },
    methods:{
    this.show = false
    }
    ...
</script>

directive.js

//点击外部操作指令
   export const clickoutSide ={
        bind(el, binding, vnode) {
          function documentHandler(e) {
            if (el.contains(e.target)) {
              return false
            }
            if (binding.expression) {
              binding.value(e)
            }
          }

      
          el.__vueClickOutSize__ = documentHandler
       
          document.addEventListener('click', documentHandler)
        },
        unbind(el, binding) {
          document.removeEventListener('click', el.__vueClickOutSize__)
          delete  el.__vueClickOutSize__

       //  function KeyUp(e) {
          //  if (e.keyCode == 27) {
          //    if (binding.expression) {
            //    binding.value(e)
             // }
           // }
         // } 
         
           // el.__vueKeyup__ = KeyUp
          
         // document.addEventListener('keyup', KeyUp)

         // document.removeEventListener('keyup', el.__vueKeyup__)
         // delete  el.__vueKeyup__
        }
      }

	//v-preventReClick防止多次点击，重复请求
    export const preventReClick = {
      inserted(el,bind){
        el.addEventListener('click',()=>{
          if(!el.disabled){
            el.disabled =true;
            setTimeout(() =>{
              el.disabled = false;
            },binding.value || 1500)
          }
        });
      }
    }


//