vue自定义指令

1.一键复制

app.directive('copy', {
    beforeMount(el, binding) {
      el.targetContent = binding.value;
      el.addEventListener('click', () => {
        if(!el.targetContent) return console.warn('没有需要复制的目标内容');
        // 创建textarea标签
        const textarea = document.createElement('textarea');
        // 设置相关属性
        textarea.readOnly = true;
        textarea.style.position = 'fixed';
        textarea.style.top = '-99999px';
        // 把目标内容赋值给它的value属性
        textarea.value = el.targetContent;
        // 插入到页面
        document.body.appendChild(textarea);
        // 调用onselect()方法
        textarea.select();
        // 把目标内容复制进剪贴板, 该API会返回一个Boolean
        const res = document.execCommand('Copy');
        res && console.log('复制成功，剪贴板内容：' + el.targetContent);
        // 移除textarea标签
        document.body.removeChild(textarea);
      })
    }, 
    updated(el, binding) {
      // 实时更新最新的目标内容
      el.targetContent = binding.value;
    },
    unmounted(el) {  
      el.removeEventListener('click', ()=>{})
    }
  })

复制成功触发事件

app.directive('copy', {
  beforeMount(el, binding) {
    el.targetContent = binding.value;
    const success = binding.arg;
    el.addEventListener('click', () => {
      ...
      res && success ? success(el.targetContent) : console.log('复制成功，剪贴板内容：' + el.targetContent);
      ...
    })
  }, 
  ...
})

使用

  <button v-copy:[success]="msg" >点击复制</button>

import {defineComponent, ref} from 'vue'

    let msg = ref('我是目标内容');
   

2.节流

  app.directive('throttle', {
    beforeMount(el, binding){
      let throttleTime = binding.value; // 节流时间
      console.log("1111",throttleTime)
      if (!throttleTime) { // 用户若不设置节流时间，则默认2s
        throttleTime = 2000;
      }
      let cbFun: number | null;
      el.addEventListener('click', (event: { stopImmediatePropagation: () => any; }) => {
        if (!cbFun) { // 第一次执行
          cbFun = setTimeout(() => {
            cbFun = null;
          }, throttleTime);
        } else {
          event && event.stopImmediatePropagation();
        }
      }, true);
    },
  });

<button @click="sayHello" v-throttle=10000>提交</button>

const sayHello=()=>{
  console.log("hello")
}

3.防抖

app.directive('debounce', {
    beforeMount(el, binding) {
        let timer: number | null;

        el.addEventListener("click", (event: { stopImmediatePropagation: () => any; }) => {
           
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
          //关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过      binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的
            binding.value();
          }, binding?.arg as number|undefined);
        });
      }

});

  <button v-debounce:[delay]="sayHello">提交防抖</button>

    let delay =ref(3000)