 const vColorDirective: Directive = {
  created: () => {
    console.log("------ 初始化 ------");
  },
  beforeMount(...args: Array<any>) {
    // 在元素上做些操作
    console.log("------ 初始化一次 ------");
  },
  mounted(el: any, dir: DirectiveBinding<Value>) {
    el.style.background = dir.value.background;
    console.log("------ 初始化 ------");
  },
  beforeUpdate() {
    console.log("------ 更新之前 ------");
  },
  updated() {
    // 动态绑定的值 改变时 触发
    console.log("------ 更新结束 ------");
  },
  beforeUnmount(...args: Array<any>) {
    console.log(args);
    console.log("------ 卸载之前 ------");
  },
  unmounted(...args: Array<any>) {
    console.log("------ 卸载完成 ------");
  },
};

在模板中使用自定义指令：

<template>
  <button @click="show = !show">动态改变的值 —— {{ show }}</button>
  <Dialog v-color-directive="{ background: 'red', flag: show }"></Dialog>
</template>

2.2.2 在 setup 中定义自定义指令（此处为函数简写形式）

在 mounted 和 updated 时，触发相同的行为，其他生命周期内不做任何操作

<template>
   <div>
      <input v-model="value" type="text" />
      <div v-color-directive="{ background: value }"></div>
   </div>
</template>
   
<script setup lang='ts'>
import { ref, Directive, DirectiveBinding } from 'vue'

// 输入框双向绑定的值，用于输入各种颜色
let value = ref<string>('')

type Dir = {
   background: string
}

// 这里用函数定义了自定义指令，而不是对象了
const vColorDirective: Directive = (el: HTMLElement, binding: DirectiveBinding<Dir>) => {
   // 每次输入的值改变，都会改变背景颜色
   el.style.background = binding.value.background
}

</script>

2.3 自定义指令 Demo —— 实现拖动

实现过程：

定义函数自定义指令
获取可以被拖拽的的 DOM，也就是头部
给可拖拽部分的 DOM，添加鼠标按下时的事件监听
记录鼠标落下的位置（为了避免移动时，计算的距离不对）
全局添加移动监听，在移动监听的函数里，获取移动的距离，并且移动元素
鼠标抬起时，移除全局添加的移动监听

<template>
   <div v-drag class="box">
      <div class="header"> 头部 - 可拖拽 </div>
      <div> 身体 - 不可拖拽 </div>
   </div>
</template>
   
<script setup lang='ts'>
import { ref, Directive, DirectiveBinding } from 'vue'

// 这里用函数定义了自定义指令，而不是对象了
const vDrag: Directive<any, void> = (el: HTMLElement, binding: DirectiveBinding) => {
   // 获取可以被拖拽的的 DOM，也就是头部
   let dragElement: HTMLDivElement = el.firstElementChild && HTMLDivElement

   // 鼠标按下的事件
   const mouseDown = (e: MouseEvent) => {
     // 记录鼠标落下的位置（为了避免移动时，计算的距离不对）
     let moX = e.clientX - el.offsetLeft;
     let moY = e.clientY - el.offsetTop;

     // 定义移动事件函数
     const move = (e: MouseEvent) => {
       // 从这里可以获取移动时的坐标
       console.log('获取移动时的坐标 ---', e);
       // 移动元素（记得 减掉 鼠标最初按下的位置）
       el.style.left = e.clientX - moX + 'px';
       el.style.top = e.clientY - moY + 'px';
     };

     // 全局添加移动监听
     document.addEventListener('mousemove', move);

     // 鼠标抬起时，取消监听 全局鼠标移动 事件
     document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', move);
     });
   };

   // 给可拖拽部分的 DOM，添加事件监听
   dragElement.addEventListener('mousedown', mouseDown);
}

</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^