Vue3 directive自定義指令內部實現(xiàn)示例

更新時間：2022年12月15日 15:28:42 作者：Chang愛學習

這篇文章主要為大家介紹了Vue3 directive自定義指令內部實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

directive-自定義指令（屬于破壞性更新）

Vue中有v-if,v-for,v-bind，v-show,v-model 等等一系列方便快捷的指令今天一起來了解一下vue里提供的自定義指令

Vue3指令的鉤子函數(shù)

created 元素初始化的時候
beforeMount 指令綁定到元素后調用只調用一次
mounted 元素插入父級dom調用
beforeUpdate 元素被更新之前調用
update 這個周期方法被移除改用updated
beforeUnmount 在元素被移除前調用
unmounted 指令被移除后調用只調用一次
Vue2 指令 bind inserted update componentUpdated unbind

在setup內定義局部指令

但這里有一個需要注意的限制：必須以 vNameOfDirective 的形式來命名本地自定義指令，以使得它們可以直接在模板中使用。

<template>
  <button @click="show = !show">開關{{show}} ----- {{title}}</button>
  <Dialog  v-move-directive="{background:'green',flag:show}"></Dialog>
</template>

const vMoveDirective: 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(args);
    console.log("======>卸載完成");
  },
};

生命周期鉤子參數(shù)詳解

第一個 el 當前綁定的DOM 元素

第二個 binding

instance：使用指令的組件實例。
value：傳遞給指令的值。例如，在 v-my-directive="1 + 1" 中，該值為 2。
oldValue：先前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否有更改都可用。
arg：傳遞給指令的參數(shù)(如果有的話)。例如在 v-my-directive:foo 中，arg 為 "foo"。
modifiers：包含修飾符(如果有的話) 的對象。例如在 v-my-directive.foo.bar 中，修飾符對
為 {foo: true，bar: true}。
dir：一個對象，在注冊指令時作為參數(shù)傳遞

第三個當前元素的虛擬DOM 也就是Vnode

第四個 prevNode 上一個虛擬節(jié)點，僅在 beforeUpdate 和 updated 鉤子中可用

函數(shù)簡寫

你可能想在 mounted 和 updated 時觸發(fā)相同行為，而不關心其他的鉤子函數(shù)。那么你可以通過將這個函數(shù)模式實現(xiàn)

<template>
   <div>
      <input v-model="value" type="text" />
      <A v-move="{ background: value }"></A>
   </div>
</template>
<script setup lang='ts'>
import A from './components/A.vue'
import { ref, Directive, DirectiveBinding } from 'vue'
let value = ref<string>('')
type Dir = {
   background: string
}
const vMove: Directive = (el, binding: DirectiveBinding<Dir>) => {
   el.style.background = binding.value.background
}
</script>

案例自定義拖拽指令

<template>
  <div v-move class="box">
    <div class="header"></div>
    <div>
      內容
    </div>
  </div>
</template>
<script setup lang='ts'>
import { Directive } from "vue";
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement;
    const mouseDown = (e: MouseEvent) => {
      //鼠標點擊物體那一刻相對于物體左側邊框的距離=點擊時的位置相對于瀏覽器最左邊的距離-物體左邊框相對于瀏覽器最左邊的距離
      console.log(e.clientX, e.clientY, "-----起始", el.offsetLeft);
      let X = e.clientX - el.offsetLeft;
      let Y = e.clientY - el.offsetTop;
      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + "px";
        el.style.top = e.clientY - Y + "px";
        console.log(e.clientX, e.clientY, "---改變");
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", () => {
        document.removeEventListener("mousemove", move);
      });
    };
    moveEl.addEventListener("mousedown", mouseDown);
  },
};
</script>
<style lang='less'>
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  .header {
    height: 20px;
    background: black;
    cursor: move;
  }
}
</style>

以上就是Vue3 directive自定義指令內部實現(xiàn)示例的詳細內容，更多關于Vue3 directive自定義指令的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: