Vue3 – 高级语法补充:自定义指令

在Vue的模板语法中我们学习过各种各样的指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来 自定义自己的指令。

注意：在Vue中，代码的复用和抽象主要还是通过组件；

通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；

自定义指令分为两种：

自定义局部指令：组件中通过 directives 选项，只能在当前组件中使用；

自定义全局指令：app的 directive 方法，可以在任意组件中被使用；

自定义指令案例：时间戳的显示需求：

import dayjs from 'dayjs'

export default function directiveFtime(app) {
  app.directive("ftime", {
    mounted(el, bindings) {
      // 1.获取时间, 并且转化成毫秒
      let timestamp = el.textContent
      if (timestamp.length === 10) {
        timestamp = timestamp * 1000
      }

      timestamp = Number(timestamp)

      // 2.获取传入的参数,有传参数就用自己的，没有就用默认的。
      //
{{ timestamp }}
   有参数用自己的，"'YYYY/MM/DD'"
      //
{{ 1551111166666 }}
    没有参数，用"YYYY-MM-DD HH:mm:ss"
      let value = bindings.value
      if (!value) {
        value = "YYYY-MM-DD HH:mm:ss"
      }

      // 3.对时间进行格式化
      const formatTime = dayjs(timestamp).format(value)
      el.textContent = formatTime
    }
  })
}

 封装

导入main.js

App.vue中