自定义指令
自定义指令
ts
import { Directive } from 'vue'
export default {
// 在绑定元素的 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) {},
} as Directive
指令的钩子会传递以下几种参数：
el：指令绑定到的元素。这可以用于直接操作 DOM。binding：一个对象，包含以下属性。value：传递给指令的值。例如在v-my-directive="1 + 1"中，值是2。oldValue：之前的值，仅在beforeUpdate和updated中可用。无论值是否更改，它都可用。arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是foomodifiers：一个包含修饰符的对象 (如果有的话)。例如在v-my-directive.foo.bar中，修饰符对象是{ foo: true, bar: true }。instance：使用该指令的组件实例。dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。
html
<div v-example:foo.bar="baz"></div>
binding 参数会是一个这样的对象：
json
{
arg: 'foo',
modifiers: { bar: true },
value: /* `baz` 的值 */,
oldValue: /* 上一次更新时 `baz` 的值 */
}
自定义指令的参数也可以是动态的。举例来说：
html
<div v-example:[arg]="value"></div>
这里指令的参数会基于组件的 arg 数据属性响应式地更新。
简化形式
对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：
ts
app.directive('color', (el, binding) => {
// 这会在 `mounted` 和 `updated` 时都调用
el.style.color = binding.value
})
在 script setup 语法糖中局部引入自定义指令
vue
<script setup lang="ts">
// 注意:必须是 v 开头, 否则无法识别为局部引入的指令
import vMyDirective from './MyDirective.ts'
</script>
<template>
<!-- 使用时也是 v-xx-yy 方式 -->
<button v-my-directive>按钮</button>
</template>
在script setup 语法糖中定义并局部引入
html
<script setup lang="ts">
import { Directive } from 'vue'
// 在模板中启用 v-focus
const vFocus = {
mounted: el => el.focus(),
} as Directive
</script>
<template>
<input v-focus />
</template>
全局引入
js
// index.js
import backtop from './vbacktop' // 引入指令
const directives = {
// 指令对象
backtop,
}
export default {
install(app) {
Object.keys(directives).forEach(key => {
app.directive(key, directives[key])
})
},
}
js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import directives from './directives/index'
const app = createApp(App)
app.use(directives) // 调用安装指令
app.mount('#app')
定义指令各个钩子函数触发的顺序和场景
- 初始化先执行 bing 钩子函数， 被绑定元素插入父节点时调用 inserted 钩子函数
- 节点移除后会执行 update 和 componentUpdate 钩子函数，然后执行解绑的钩子函数 unbind
- 有节点插入会先执行节点的更新和节点更新完毕的钩子函数，然后执行绑定和 inserted 钩子函数
自定义指令通常用来做什么?
- 实现 tooltips
- 实现 html 元素级别的鉴权
- 实现 loading 效果
- 实现按钮操作前的 confirm
实现 tooltips 详见
实现 html 元素级别的鉴权
以按钮权限为例
后端的操作权限设计大概分为两种
- 权限标识全局唯一
- 权限标识在指定页面下唯一
权限标识全局唯一啥意思？
假设你的系统有：用户管理，角色管理 两个界面，这两个界面都有增，删, 改, 查的按钮
那么他们的功能标识可能如下：
userAdd: 表示用户新增操作
userEdit: 表示用户编辑操作
------------------------------------
roleAdd: 表示角色新增操作
roleEdit: 表示角色编辑操作
即：他们的功能标识是全局唯一的。不会重复
前端之后获取到这些功能标识后，然后将其存在sessionStorage中，然后自定义指令从sessionStorage中获取，然后将指令传入的功能标识和sessionStorage中的对比，有相同的，表明有权限，否则表示无权限
sessionStorage中存储的操作权限数据大概如下:
json
["userAdd", "userEdit", "roleAdd", "roleEdit"]
权限标识在指定页面下唯一
依然以用户管理，角色管理 两个界面的增，删, 改, 查操作权限为例。
他们的权限数据结构可能如下：
json
[
{
"url": "/user/mgr",
"name": "用户管理",
// 对应前端的路由名
"routeName": "UserMgr",
"permission": ["add", "edit"]
},
{
"url": "/role/mgr",
"name": "角色管理",
// 对应前端的路由名
"routeName": "RoleMgr",
"permission": ["add", "edit"]
}
]
add,edit是重复使用的，但是在不同的界面表示的意义不一样
前端获取到操作权限数据之后，进行转换并存储在sessionStorage中，转换后的权限数据大概如下
json
{
"UserMgr": ["add", "edit"],
"RoleMgr": ["add", "edit"]
}
这种情况，要实现操作鉴权，需要分三步实现：
- 通过 vue-router 的路由守卫，在进入指定的路由前先获取
to路由的路由名，然后存储在localStorage中 - 自定义指令先从
localStorage中获取to路由名，然后通过这个to路由名，找到对应的功能权限标识 - 自定义指令将第 2 步获取到操作权限标识数组和传入的操作权限标识比较，有相同的值，则有权限，否则表示没有权限
自定义指令鉴权的效果
- 禁用（置灰）
el.setAttribute('disable',true)
- 删除（或
display:none）el.parentNode.removeChild(el)Object.assign(el.style,{display:'none'})
鉴权指令示例
loading 指令示例
该自定义指令的 loading 遮罩是通过绝对定位实现的. 暂且称为 absolute-0
这种 loading 实现有两个特点：
- 这种 css 方式的的 loading 遮罩，如果加
v-loading指令的容器本身有滚动条或者开始没有，后来又因为内容的增加而有了，此时这个 loading 遮罩只能遮住这个滚动容器的视口高度部分，超过了视口高度的另一部分，不会被遮住。那么如何解决这个问题呢？ - 要求父容器是相对定位，不然 loading 元素的绝对定位位置会发生错误
css
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
解决这种 loading 实现特点滚动容器无法完全遮住问题
- 修改 loading 组件的实现方式，让 loading 组件通过 ResizeObserve API 监听父容器的大小变化，然后也动态更改 loading 遮罩的高度
- 像下面例子中的第三个示例一样，将 v-loading 加在滚动条容器的内部（即：加在撑出滚动条的那个元素上）
confirm 组件
点击其他地方消失
Clickoutside
实用自定义指令
Vue3 自定义指令-10 个常见的实用指令，带详细讲解，快拿去收藏！！！