前言
最近工作开发中频繁用到Vue
的自定义指令,所以有时间总结记录一下Vue
自定义指令的用法及能用到的场景。最后分享一下常用到的指令库。
介绍
什么叫指令?
百度百科解释指令是指:告诉计算机从事某一特殊运算的代码。那同样是代码,特殊是什么意思呢?特殊是指能够将某一复杂的操作包装起来,用一段特定的指令来完成。那这段指令就具有普适性和可迁移性。当然,Vue的自定义指令不会涉及到很深。
Vue 中的自定义指令
除了 Vue 内置的一系列指令 (比如
v-model
或v-show
) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。
我们知道两种在 Vue 中重用代码的方式无非是两种:组件
和组合式函数
。组件是Vue中主要的构建模块,而组合式函数则侧重于有状态的逻辑。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
创建自定义指令
创建一个最简单的自动聚焦输入框的自定义指令。
script setup 模式
在 <script setup>
中,任何以 v
开头的驼峰式命名的变量都可以被用作一个自定义指令。在下面的例子中,vFocus
即可以在模板中以 v-focus
的形式使用。
<script setup>
// 定义 vFocus 指令
const vFocus = {
mounted: (el) => el.focus()
}
</script>
// 使用
<template>
<input v-focus />
</template>
非 script setup 模式
在没有使用 <script setup>
的情况下,自定义指令需要通过 directives
选项注册。
export default {
setup() {
/*...*/
},
directives: {
// 在模板中启用 v-focus
focus: {
/* ... */
}
}
}
全局注册
将一个自定义指令全局注册到应用层级,这样在所有的组件中都能使用这个自定义指令完成某项功能:
const app = createApp({})
// 使 v-focus 在所有组件中都可用
app.directive('focus', {
/* ... */
})
自定义指令钩子
自定义指令钩子分别有 7 个钩子函数,分别对应Vue 示例渲染的不同生命周期,代表在相应的生命周期内执行相关的钩子代码。
钩子生命周期:
const myDirective = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
}
钩子参数
以下分别是对 el、binding对象、vnode、prevNode的参数解释
参数 | 参数解释 |
---|---|
el | 指令绑定到的元素。这可以用于直接操作 DOM。 |
binding | 一个对象,包含以下属性。 |
binding.value | 传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2 ,可以是任何js变量或表达式。 |
binding.oldValue | 之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。 |
binding.arg | 传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 "foo" 。 |
binding.modifiers | 一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true } 。 |
binding.instance | 传使用该指令的组件实例 |
binding.dir | 指令的定义对象。 |
vnode | 代表绑定元素的底层 VNode。 |
prevNode | 之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。 |
ps:自定义指令与透传具有相似的特性,会应用到组件的根元素上,但是不能用在多跟组件上,如果使用会忽略指令并抛出异常。
常用指令库
- V-Click-Outside
- 功能:点击组件外触发钩子指令。
- 仓库:github.com/ndelvalle/v…
- 使用:
npm install --save v-click-outside
<template>
<div v-click-outside="outsideHandle"></div>
</template>
<script lang="ts" setup>
const outsideHandle = () => {
// ...
}
</script>
- V-Clipboard
- 功能:点击元素时复制传入指令的值。
- 仓库:github.com/euvl/v-clip…
- 使用:
npm install --save v-clipboard
<template>
<button v-clipboard="value">
Copy to clipboard
</button>
</template>
- Vue-ScrollTo
- 功能:这个指令监听元素的点击事件,然后滚动到指定位置。
- 仓库:github.com/rigor789/vu…
- 使用:
npm install --save vue-scrollto
<span v-scroll-to="{
el: '#element', // 滚动的目标位置元素
container: '#container', // 可滚动的容器元素
duration: 500, // 滚动动效持续时长(毫秒)
easing: 'linear' // 动画曲线
}"
>
Scroll to #element by clicking here
</span>