自定义指令

全局自定义指令

1.先写好样式

<!-- App.html -->
<input type="text" v-focus />

2.抽取功能到单独的文件

// directive => focus.js
export default function directiveFocus(app) {
  app.directive('focus', {
    mounted(el) {
      el?.focus()
    }
  })
}

3.导入单独的文件到 index 中,然后导出 index

// directive => index.js
import directiveFocus from './focus'
export default function useDirective(app) {
  directiveFocus(app)
}

4.引入导出的 index 然后调用并把 App 传入 index 中

// main.js
import useDirective from './directive/index'
const app = createApp(App)
useDirective(app)
app.mount('#app')

局部自定义指令

1.先写好样式

<!-- App.html -->
<input type="text" v-focus />

2.直接在文件中写功能

// App.vue
const vFocus = {
	mounted(el) {
		el?.focus()
	},
}

生命周期

const myDirective = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    // 下面会介绍各个参数的细节
  },
  // 在元素被插入到 DOM 前调用
  beformbount(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：指令绑定到的元素。这可以用于直接操作 DOM。

binding：一个对象，包含以下属性。

• value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
• oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
• arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
• modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
• instance：使用该指令的组件实例。
• dir：指令的定义对象。

vnode：代表绑定元素的底层 VNode。

prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

举例来说，像下面这样使用指令：

<div v-example:foo.bar="baz">

binding 参数会是一个这样的对象：

{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* `baz` 的值 */,
  oldValue: /* 上一次更新时 `baz` 的值 */
}

小案例一:

<div v-rmb> 999 <div>

const vRmb = {
  mounted(el, binding) {
    // el.textContent 拿到 999
    const defaultText = el.textContent
    // el.binding?.value 拿到传入的值 不传则是 undefined
    let rmb = el.binding?.value
    if (!rmb) rmb = '￥'
    el.textContent = rmb + defaultText
  }
}

小案例二:

<h2 v-time> 1234567890 </h2>

// directive => time.js
import dayjs from 'dayjs'

export default function directiveTime(app) {
  app.directive("time", {
    mounted(el, bindings) {
      // 1.获取时间
      let timestamp = el.textContent
      timestamp = Number(timestamp)

      // 2.获取传入的参数
      let value = bindings.value
      if (!value) {
        value = "YYYY-MM-DD HH:mm:ss"
      }

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

import directiveTime from "./time"
export default function directives(app) {
  directiveTime(app)
}