vue3.0自定义指令（并且实现一个 拖拽指令）

vue3.0自定义指令

• 作用：对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
• 定义指令
  • vMove: Directive = {} || (el,dir) => {}
  • vMove 就是定义的指令名称
• 使用指令
  • <A v-move />
  • 给指令传递参数
    • <A v-move="{ color: color }" />
  • 接受参数，一般来说，再mounted之中接受，然后进行dom节点操作

自定义指令之中的生命周期

• 常使用的生命周期为：
  • mounted
    • 再挂载的时候，针对dom节点进行操作，写入dom节点样式什么的啊、dom节点的自动聚焦、等等
  • updated
    • 值的更新时触发
    • <A v-move:bbb.xzl="{ color: 'yellow' , flag: flag }" />
    • eg：一个按钮控制flag值的变化时，这个updated钩子函数会触发
  • unmounted
    • 卸载的时候触发，
    • 比如使用 v-if 控制A组件的显示与隐藏，这时候会触发之

main.vue

<template>
  <div>
    <!-- v-move 使用自定义指令 -->
    <A v-move:bbb.xzl="{ color: 'yellow' }" />
  </div>
</template>

<script setup lang="ts">
import {
    Directive, DirectiveBinding } from 'vue'
import A from './childCom/A.vue'
type Dir = {
   
  color: String
}
const vMove: Directive = {
   
  created() {
   
    console.log('created')
  },
  beforeMount(...args: Array<any>) {
   
    // 在元素上做些操作
    console.log('beforeMount', args)
  },
  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
   
    // el：当前的dom节点 dir就是dom节点所传递的值
    console.log('mounted', el, dir.value)
    // 通过自定义指令 给当前A组件 的字体颜色 设置为yellow
    el.style.color = dir.value.color
  },
  beforeUpdate() {
   
    console.log('beforeUpdate')
  },
  updated() {
   
    console.log('updated')
  },
  beforeUnmount() {
   
    // console.log(args)...args: Array<any>
    console.log('beforeUnmount')
  },
  unmounted() {
   
    // console.log(args)...args: Array<any>
    console.log('unmounted')
  },
}
</script>
<script lang="ts">
export default {
   
  name: 'Main',
}
</script>
<style lang="scss" scoped></style>

A.vue

<template>
  <div class="a">A</div>
</template>

<script setup lang="ts">
import {
   } from 'vue'
</script>
<script lang="ts"