在vue中，各种各样的指令用起来非常的方便，v-for、v-if、v-show等等，vue同时也允许我们自定义，那么使用ts和vue3的setup语法糖如何进行自定义指令呢？
在setup里面不像是在options Api的方式vue提供了directives配置让我们注册指令，所以在setup中指令的名字就需要按照一定的命名规则
// directivesName使用大驼峰
v + [directivesName]
编写指令
本质上指令就是一个对象，对象里面有很多的钩子函数
| 钩子函数 | 描述 |
|---|---|
| mounted | 在绑定元素的父组件被挂载后调用 |
| updated | 在包含组件的 VNode 及其子组件的 VNode 更新后调用 |
我常用的就这俩了，哈哈，更多钩子函数大家可以去看官网
下面就用我喜欢的例子来说吧，就是满星和半星
1.png
当然，我就不用iconfont了拿div模拟一下了，鼠标在div做半边，左半边显示黄色，鼠标指在右边整个div都是黄色
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
我的思路就是鼠标在
div.rate左边时，span显示，在右边时，span隐藏，div.rate变成黄色开始：
- 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
那我们取值的时候就是binding.value.name,和传入基本类型不同的就是现在没有很好的提示
Snipaste_2022-04-30_17-13-31.png
其实在
DirectiveBinding类型中可以传入一个泛型，默认是any这个泛型就是binding.value的类型
Snipaste_2022-04-30_17-15-47.png
下面我们就能写一个接口了,将这个接口传给
DirectiveBinding，那么这个binding.value就有值了，而且编码也有了很好的提示
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，只是后两个用的比较少
网友评论