如何在Vue3中实现自定义指令(超详细!)

app.directive('focus', {
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
})

app.directive('reserve', {
  beforeUpdate(el, binding) {
    console.log(binding);
    el.innerText = binding.value ? binding.value.split('').reverse().join('') : '';
  }
})

<script setup>
import {ref} from 'vue'
let hello = ref('')
</script>
<template>
  <input v-focus v-model="hello" />
  <div v-reserve:foo.bar="hello"></div>
</template>

app.directive('color', (el, binding) => {
    // 这将会在mounted和updated时调用
    el.style.color = binding.value;
})

<script setup>
import {ref, Reactive} from 'vue'
let hello = ref('')
const obj = reactive({
  hello: '',
  world: ''
})
</script>
<template>
  <input v-focus v-model="obj.hello" />
  <div v-reserve:foo.bar="obj"></div>
  <!-- <div v-reserve:foo.bar="{hello: obj.hello, world: obj.world}"></div> -->
</template>

el.innerText = binding.value ? binding.value.hello.split('').reverse().join('') : '';

// Reverse.vue
<template>
    <div></div>
    <div></div>
</template>

// Reverse.vue
<template>
    <div></div>
    <div></div>
</template>

<script setup>
...
import ReverseVue from './Reserve.vue'
...
</script>
<template>
  ...
  <ReverseVue v-reserve="obj"/>
</template>

// Reverse.vue
<template>
    <!-- v-reserve 指令会被应用在此处 -->
    <div></div>
</template>

// Reverse.vue
<template>
    <!-- v-reserve 不会作用，并且会抛出警告 -->
    <div></div>
    <div></div>
</template>

app.directive('focus', (el) => {
    el.focus();
})

app.directive('debounce', {
  mounted(el, binding) {
    // 至少需要回调函数以及监听事件类型
    if (typeof binding.value.fn !== 'function' || !binding.value.event) return;
    let delay = 200; // 默认延迟时间
    el.timer = null;
    el.handler = function() {
      if (el.timer) {
        clearTimeout(el.timer);
        el.timer = null;
      };
      el.timer = setTimeout(() => {
        binding.value.fn.apply(this, arguments)
        el.timer = null;
      }, binding.value.delay || delay);
    }
    el.addEventListener(binding.value.event, el.handler)
  },
  // 元素卸载前也记得清理定时器并且移除监听事件
  beforeMount(el, binding) {
    if (el.timer) {
      clearTimeout(el.timer);
      el.timer = null;
    }
    el.removeEventListener(binding.value.event, el.handler)
  }
})

<script setup>
const handleClick = () => {
  console.log('防抖点击');
}
</script>
<template>
  <button v-debounce="{fn: handleClick, event: 'click', delay: 200}">点击试试</button>
</template>

app.directive('throttle', {
  mounted(el, binding) {
    // 至少需要回调函数以及监听事件类型
    if (typeof binding.value.fn !== 'function' || !binding.value.event) return;
    let delay = 200;
    el.timer = null;
    el.handler = function() {
      if (el.timer) return;
      el.timer = setTimeout(() => {
        binding.value.fn.apply(this, arguments)
        el.timer = null;
      }, binding.value.delay || delay);
    }
    el.addEventListener(binding.value.event, el.handler)
  },
  // 元素卸载前也记得清理定时器并且移除监听事件
  beforeMount(el, binding) {
    if (el.timer) {
      clearTimeout(el.timer);
      el.timer = null;
    }
    el.removeEventListener(binding.value.event, el.handler)
  }
})

<script setup>
import {reactive} from 'vue'
const obj = reactive({
  hello: '',
  world: ''
})
const handleInput = () => {
  console.log('节流输入框的值：', obj.hello);
}
</script>
<template>
  <input v-throttle="{fn: handleInput, event: 'input', delay: 1000}" v-model="obj.hello" />
</template>

app.directive('hide', {
  mounted(el, binding) {
    el.handler = function(e) {
      // 如果点击范围在绑定的元素范围内，那么将不执行指令操作，而是执行原点击事件
      if (el.contains(e.target)) return;
      if (typeof binding.value.fn === 'function') {
        // 绑定给指令的如果是一个函数，那么将回调并指定this
        binding.value.fn.apply(this, arguments)
        // 并不推荐使用style的方式来隐藏元素，这样的话控制弹窗的变量就无法改变，所以推荐使用回调函数
        // el.style.display = 'none';
        // 解除事件绑定
        document.removeEventListener('click', el.handler)
      }
    }
    // 监听全局的点击事件
    document.addEventListener('click', el.handler)
    // 如果同步绑定全局事件不生效，可以采用异步的方式
    // setTimeout(() => {
    //   document.addEventListener('click', el.handler)
    // }, 0);
  },
  // 解除事件绑定
  beforeMount(el) {
    document.removeEventListener('click', el.handler)
  }
})

<script setup>
import {ref} from 'vue'
let isshowModal = ref(false)
const showModal = () => {
  isShowModal.value = true;
}
const cancleModal = () => {
  console.log('cancleModal');
  isShowModal.value = false;
}
</script>
<template>
  <button @click.stop="showModal">点击显示弹窗</button>
  <div class="modal" v-hide="{fn: cancleModal}" v-if="isShowModal">
    <p>我是弹窗</p>
    <button @click.stop="cancleModal">关闭</button>
  </div>
</template>