自定义指令

vue3自定义指令

type Dir = {
  background: string
}
const vMove: Directive = {
  created() {},
  beforeMount() {},
  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>, vnode) {
    // el 绑定elment元素
    // dir 实例上下文 v-model:name.custom='test'
    // 1. arg 参数名(name)
    // 2. value 传递的值(test)
    // 3. oldValue 上一次的值
    // 4. modifiers 自定义修饰符(custom)
    // 5. instance 组件实例
    // 6. dir 生命周期
    // vnode 虚拟dom
    console.log(el, dir, vnode)
  },
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}
// 函数简写, 只会触发mounted额updated钩子函数
const vMove1: Directive = (el: HTMLElement, bingd: DirectiveBinding<Dir>) => {
  // ....
}

<div v-move:bgColor.test="{ background: 'red' }"></div>