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自定義指令的資料請關注腳本之家其它相關文章!
相關文章
Avue和Element-UI動態(tài)三級表頭的實現(xiàn)
本文主要介紹了Avue和Element-UI動態(tài)三級表頭的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-07-07Vue自定義指令實現(xiàn)對數(shù)字進行千分位分隔
對數(shù)字進行千分位分隔后展示應該是大部分同學都做過的功能了吧,常規(guī)的做法通常是編寫一個工具函數(shù)來對數(shù)據(jù)進行轉換,那么我們可不可以通過vue指令來實現(xiàn)這一功能呢,下面我們就來探索一下呢2024-02-02解決‘vue-cli-service‘不是內部或外部命令,也不是可運行的程序問題
遇到'vue-cli-service'不是內部或外部命令的錯誤通常因為VueCLI未正確安裝或配置,解決步驟包括確保VueCLI全局安裝、檢查項目依賴、安裝項目依賴、清理并重新安裝依賴以及使用npm腳本調用vue-cli-service,按步驟操作后應能解決問題2024-11-11vue element實現(xiàn)表格合并行數(shù)據(jù)
這篇文章主要為大家詳細介紹了vue element實現(xiàn)表格合并行數(shù)據(jù),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11