认识自定义指令

除了 v-show、v-for、v-model 之外，Vue 还允许我们来自定义自己的指令。

• 在 Vue 中，代码的复用和抽象主要是通过组件；
• 当需要对 DOM 元素进行底层操作时，可以使用自定义指令。

自定义指令分为两种：

1. 自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；
2. 自定义全局指令：app 的 directive 方法，可以在任意组件中被使用。

自定义指令案例

自定义文本框自动聚焦的指令。

实现自动聚焦局部自定义指令

1. OptionsAPI 的具体实现

   局部自定义指令使用 directives 对象中定义指令。

   <template>
   <!-- 使用 v-fous 就可以使用自定义指令了 -->
   <input type="text" v-focus>
   </template>
   
   <script>
   export default {
       directives: {
           focus: {
               // 生命周期函数
               mounted(el) {
                   // el 是绑定了指令的元素
                   // ? 判断是否有 el 元素 更严谨
                   el?.focus()
               }
           }
       }
   }
   </script>

2. CompsitionAPI 的具体实现

   <template>
   <!-- 使用 v-fous 就可以使用自定义指令了 -->
   <input type="text" v-focus>
   </template>
   
   <script setup>
       const vFocus = {
            // 生命周期函数
               mounted(el) {
                   // el 是绑定了指令的元素
                   // ? 判断是否有 el 元素 更严谨
                   el?.focus()
       }
   </script>

实现自动聚焦全局自定义指令

在 mian.js 中，在 app.directive('指令名称', { 自定义指令的逻辑 }) 使用全局指令，所有的组件都可以使用全局自定义指令。

import { createApp } from 'vue'
import App from 'App.vue'

const app = createApp(App)

// 挂载全局自定义指令
app.directive('focus', {
    mounted(el) {
        el?.focus()
    }
})

app.mount('#app')

自定义指令的生命周期

• created：在绑定元素的 attribute 或事件监听器被应用之前调用；
• beforeMount：当指令第一次绑定到元素并且在挂载父组件之前被调用；
• mounted：在绑定元素的父组件被挂载后调用；
• beforeUpdate：在更新包含组件的 VNode 之前被调用；
• updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
• beforeUnmount：在卸载绑定元素的父组件之前调用；
• unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

自定义指令参数修饰符

<h2 v-focus:info.aaa.bbb="'123'">其中：

• info是参数名称
• aaa,bbb 是修饰符名称
• 后面传入的是具体的值

mounted(el, bindings) 其中 bindings 是绑定元素的属性参数，是一个对象。

自定义指令格式化事件案例

<template>
    <h2 v-ftime="'YYYY:MM:DD HH:mm:ss'">
        {{ 1231231231 }}
    </h2>
</template>

<script setup>
// 安装 dayjs npm i dayjs
import dayjs from 'dayjs'
const vFtime = {
    mounted(el, bindings) {
        // 获取事件，并转换为毫秒
        let timestamp = el.textContent
        if (timestamp.length === 10) {
            timestamp *= 1000
        }
        // 将字符串转换为数字型
        timestamp = Number(timestamp)
        // 获取传入的参数
        let value = bindings.value
        if (!value) {
            value = 'YYYY-MM-DD'
        }
        // 对时间进行格式化
        const formatTime = dayjs(timestamp).format('value')
        el.textContent = formatTime
    }
}
</script>