目录

自定义指令

自定义指令的作用?

自定义指令的使用步骤?

1. 注册 (全局注册 或 局部注册)

2. 标签上 v-指令名 使用

自定义指令 - 指令的值

1. 通过指令的值相关语法，可以应对更复杂指令封装场景

2. 指令值的语法：

自定义指令 - v-loading 指令封装

---

自定义指令

自定义指令：自己定义的指令, 可以封装一些 dom 操作， 扩展额外功能

需求: 当页面加载时，让元素将获得焦点

(autofocus 在 safari 浏览器有兼容性)

操作dom：dom元素.focus()

---

自定义指令的作用?

封装一些 dom 操作，扩展额外功能，例如获取焦点

自定义指令的使用步骤?

1. 注册 (全局注册 或 局部注册)

在 inserted 钩子函数中，配置指令dom逻辑

2. 标签上 v-指令名 使用

---

自定义指令 - 指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

l 语法：在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

l 通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数。

1. 通过指令的值相关语法，可以应对更复杂指令封装场景

2. 指令值的语法：

• ① v-指令名 = "指令值"，通过 等号 可以绑定指令的值
• ② 通过 binding.value 可以拿到指令的值
• ③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作

---

自定义指令 - v-loading 指令封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

需求：封装一个 v-loading 指令，实现加载中的效果

实现：

1. 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层
2. 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可
3. 结合自定义指令的语法进行封装复用

1. 通过指令相关语法，封装了指令 v-loading 实现了请求的loading效果

2. 核心思路：

• (1) 准备类名 loading，通过伪元素提供遮罩层
• (2) 添加或移除类名，实现loading蒙层的添加移除
• (3) 利用指令语法，封装 v-loading 通用指令

---

inserted 钩子中，binding.value 判断指令的值，设置默认状态

update 钩子中，binding.value 判断指令的值，更新类名状态