在vue中，各种各样的指令用起来非常的方便，v-for、v-if、v-show等等，vue同时也允许我们自定义，那么使用ts和vue3的setup语法糖如何进行自定义指令呢？
在setup里面不像是在options Api的方式vue提供了directives配置让我们注册指令，所以在setup中指令的名字就需要按照一定的命名规则

// directivesName使用大驼峰
v + [directivesName]

编写指令

本质上指令就是一个对象，对象里面有很多的钩子函数

我常用的就这俩了，哈哈，更多钩子函数大家可以去看官网
下面就用我喜欢的例子来说吧，就是满星和半星

1.png

src
   |___rate
          |______rate.vue 
          |______rate.ts   // 编写指令

App.vue中导入并使用

<template>
  <div>
    <Rate></Rate>
  </div>
</template>

<script setup lang="ts">
import Rate from "./components/rate/rate.vue"; 
// 无需注册直接使用，但是必须加上后缀名,不然报错
// Component is missing template or render function.
</script>

rate.vue

<template>
  <div class="rate">
    <div class="rate">
      <span class="half"></span>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.rate {
  width: 30px;
  height: 30px;
  background-color: #ccc;
  cursor: pointer;
}

.half {
  width: 50%;
  display: block;
  height: 100%;
  background: yellow;
}
</style>

2.png

• rate.ts

export default {
  mounted() {...}
}

现在rate.ts就是一个指令，现在在rate.vue中导入,并使用

<template>
  // 给div使用v-rate-pointer指令
  <div class="rate" v-rate-pointer>
    <span class="half"></span>
  </div>
</template>

<script setup lang="ts">
// 注意命名
import vRatePointer from "./rate";
</script>

那么在rate.ts的mounted（）钩子函数中就会有一个参数el，这个参数就是使用这个指令的元素，所以就是div，因为是ts，所以我们要给el一个类型

export default {
  mounted(el: HTMLDivElement) {
    console.log(el);
  }
}

Snipaste_2022-04-30_16-28-44.png

那现在就可以监听鼠标在div上的移动了

export default {
  mounted(el: HTMLDivElement) {
    // 获取到span元素
    const span = el.children[0] as HTMLSpanElement
    // 获取div的位置信息和宽度
    const { width, left } = el.getClientRects()[0]
    el.addEventListener('mousemove', function (e: MouseEvent) {
      // 鼠标距离div左侧的距离
      const leftLen = e.clientX - left
      // 判断，当鼠标在div左侧，即 leftLen > 0 && leftLen < width / 2
      if (leftLen > 0 && leftLen < width / 2) {
        // span显示出来,div背景色变成灰色
        el.style.background = "#ccc"
        span.style.display = "block"
      } else if (leftLen > width / 2 && leftLen < width) {
        // span隐藏，div背景色变成黄色
        span.style.display = 'none'
        el.style.background = 'yellow'
      }
    })

    // 移出div时，div背景变成灰色，span隐藏
    el.addEventListener('mouseout', function () {
      el.style.background = "#ccc"
      span.style.display = 'none'
    })
  }
}

185a23b61561b5fd08476b8e26a87181.gif

<template>
  // 此处等号后面不是字符串，而是要传递变量，
  // 要直接传递字符串，就得再加一层引号
  // v-rate-pointer="'真正字符串'"
  <div class="rate" v-rate-pointer="str">
    <span class="half"></span>
  </div>
</template>

<script setup lang="ts">
import vRatePointer from "./rate";
const str = "我的第一个指令"
</script>

指令这边就可以通过第二个参数进行接收了，但是因为是ts，所以要给类型： DirectiveBinding,从vue导入即可

import { DirectiveBinding } from 'vue'

export default {
  mounted(el: HTMLDivElement, binding: DirectiveBinding ) {
    ......
  }
}

通过binding.value就能拿到我们的数据了，那要传递一个对象呢？也一样

<template>
  <div class="rate" v-rate-pointer="obj">
    <span class="half"></span>
  </div>
</template>

<script setup lang="ts">
import vRatePointer from "./rate";
const obj = {
  name: "我的第一个指令",
  number: 1234
}
</script>

raet.ts

import { DirectiveBinding } from 'vue'

export default {
  mounted(el: HTMLDivElement, binding: DirectiveBinding) {
    console.log(binding.value)
  }
}

Snipaste_2022-04-30_17-10-17.png

Snipaste_2022-04-30_17-13-31.png

Snipaste_2022-04-30_17-15-47.png

Snipaste_2022-04-30_17-20-01.png

函数简写

有的时候传进来的参数是需要监听他的变化重新执行指令的代码，那么就可以在updated钩子函数中写这部分逻辑，因为mounted中的逻辑在绑定的元素挂载到DOM执行一次，参数变化时不会执行了

export default {
  mounted(el, binding) {...},
  updated(el, binding){....}
}

但是往往两个钩子函数的逻辑都差不多，写两遍的话代码就显得冗余了，所以在两个钩子函数中逻辑一样时，就直接合并成一个函数，并且导出这个函数就行了

import { DirectiveBinding } from 'vue'

interface test {
  name: string
  number: number
}

export default (el: HTMLDivElement, binding: DirectiveBinding<test>) => {
    // 你的逻辑
}

ok，差不多就这样了，后面更新第三个参数vnode的使用，其实每个钩子函数都有四个参数：el、binding、vnode 和 prevVnode，只是后两个用的比较少