V3-directive() 自定义指令相关

1.全局自定义指令 directive

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App)
/ 全局自定义指令
app.directive('Lyon', {
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  updated() {
    console.log('updated')
  },
  unmounted() {
    console.log('unmounted')
  },
  mounted(ele, binding, vNode) {
    console.log('mounted')
    console.log(binding) // binding
    console.log(vNode) // 虚拟dom 
    ele.focus()
    ele.value = binding.value
  }
})
app.mount('#app')

组件setup 语法糖 下内部自定义指令

// v开头的小驼峰均被认为是自定义指令
const vLyonDir = {
  mounted(ele: HTMLElement, binding:DirectiveBinding) {
    console.log(ele)
    ele.focus()
    ele.value = binding.value
  },
}
// template部分 是使用
 <input type="number" v-lyon-dir= 9999>

非setup 语法糖下组件自定义指令（修饰符，指令参数｜动态参数：arg， binding:可以是数组对象 ）

import {defineComponent, DirectiveBinding } from 'vue'
export default defineComponent({
  setup() {
    return {
      lyon: 1111,
      name: 'ly'
    }
  },
  directives: {
    lyon: {
      mounted(ele:HTMLElement, binding: DirectiveBinding) {
        console.log(ele)
        console.log(binding.value) // [1111, 222] 数组 对象 均可
        console.log(binding.modifiers) // v-dir.修饰符  modifier下 {modifier1: true, modifier2: true}
        // tip: template 中使用 v-dir:[动态变量]   该参数存入 arg 中
        console.log(binding?.arg) //ly 指令参数
        // ele.focus()
        // ele.value = binding.value
      },
    }
  }
})

// template部分
<template lang="">
  <input type="number" v-lyon:[name].modifier1.modifier2 = '[1111, 222]'>
  <button @click= "clickBtn">点醒你</button>
</template>