前言

• 在【自定義指令—v2與v3之間的區別【VUE基礎】一文中，整理了自定義指令部分vue2和vue3 兩個版本的區別，有興趣的伙伴或者針對自定義部分比較迷茫的伙伴可以跳轉看一下。
• 此次主要介紹一些自己積累的一些自定義指令的代碼，與大家一起分享。
• 后續，開發中如果有新的比較有意思的部分，會同步更新。

1.基本介紹

當前簡單介紹一下自定義指令，如需了解更多關于自定義指令的基礎知識，【點擊跳轉自定義指令基礎】

1-1.基本概念

• 定義：自定義指令是Vue提供的擴展機制，用于封裝對DOM元素的底層操作邏輯
• 與內置指令區別：內置指令如v-if/v-for可直接使用，而自定義指令需要開發者顯式注冊
• 適用場景：主要用于需要直接操作DOM元素的復用邏輯

1-2.核心特征

• 命名規范：
• 必須以v-開頭
• 在<script setup>中可使用駝峰命名變量自動轉換
• 生命周期鉤子：
• mounted：元素插入父節點時調用
• updated：組件VNode更新時調用
• unmounted：元素從父節點移除時調用
• 參數傳遞：
• el：指令綁定的DOM元素
• binding：包含value/oldValue等屬性的對象

1-3.實現方式

1.全局注冊

app.directive('highlight',{mounted(el,binding) {el.focus()}
})

2.局部注冊，即組件中注冊

directives: {highlight: {mounted(el,binding) {el.focus()}}

2.常用自定義指令代碼分享

2-1.搜索文本高亮

展示效果：

解釋說明：

• 效果：
  • 搜索到的結果列表中匹配搜索關鍵字，并高亮展示；
• 實現方式：
  • 獲取元素節點，以及節點中的數據
  • 使用正則去匹配對應字段；
  • 生成新的元素，去替換匹配的部分。
• 使用場景：搜索結果展示，突然搜索關鍵字
• 使用注意：
  • 當前這種方式因為執行在mounted 鉤子函數中，只在節點加載第一次時執行，所以要想實現如上所示，就使用了定時器的異步加載，先清除，再重新過濾結果，重新加載。
• 如果有更好的辦法，可以留言，歡迎指正。

代碼分享：

• highlight.js

	export const highLight = {mounted(el, binding) {const { value } = binding;const regExp = new RegExp(value, "gi");const highLightText = (node) => {if (node.nodeType === 3) {const text = node.nodeValue;const newNode = document.createElement("span");newNode.innerHTML = text.replace(regExp, `<span style="color: red;">$&</span>`);node.parentNode.replaceChild(newNode, node);} else {const childNodes = node.childNodes;childNodes.forEach((child) => {highLightText(child);});}}highLightText(el);}};

• main.js 中全局注冊

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import { highLight2 } from './utils/highLight.js'
const app = createApp(App)
app.directive('highlight', highLight2)
app.mount('#app')

• 使用組件(只是簡單的使用例子，參考用。)

<script setup>
import {ref} from 'vue';
let search = ref('')
let testData= ref([{id:1, name:'張三'},{id:2, name:'測試'},{id:3, name:'李四'},{id:4, name:'張四'},{id:5, name:'李三'},{id:6, name:'趙四'},{id:7, name:'趙二'},{id:8, name:'唐三'},{id:9, name:'唐五'},
])
let resultData=ref([])function inputFun(){resultData.value = []//使用settimeout 的異步，使得代碼執行有點時間差。//感覺不太靠譜setTimeout(() => {resultData.value = testData.value.filter((item) => {return item.name.includes(search.value)})}, 0)
}
</script><template><div><el-input v-model="search" style="width: 240px" placeholder="Please input" @input="inputFun"/><ul>  <li v-for="item in resultData" :key="item.id"><span v-highlight="search">{{item.name}}</span></li></ul></div></template>
<style lang="scss" scoped>
div{}
</style>

2-2.頁面拖拽

展示動畫效果如下：

解釋說明：

• 實現效果
  • 可以在屏幕中拖拽到任意位置；
• 實現方式：
  • 通過position定位元素，
  • 通過鼠標事件，獲取鼠標點擊位置，獲取元素的寬高，元素在屏幕中的位置
  • 通過這些數值計算元素的left和top;
• 使用場景：瀏覽器中的智能機器人圖標等，獨立存在在瀏覽器中的元素。
• 可優化：
  • 對于瀏覽器上方的判斷邊界不是很完善。

代碼分享：

• draggable.js

function draggable(el, binding) {   let startMX,startMY;let startOL,startOT;el.style.cursor = 'move';//給元素幫定鼠標事件el.addEventListener('mousedown', (e) => {startMX = e.clientX;startMY = e.clientY;startOL = el.offsetLeft;startOT = el.offsetTop;document.addEventListener('mousemove', dragMove);document.addEventListener('mouseup', dragEnd);});// 鼠標移動事件，處理鼠標移動位置const dragMove = (e) => {const moveX = e.clientX ;const moveY = e.clientY ;const left = moveX - startMX + startOL;const top = moveY - startMY + startOT;let docH = window.innerHeight;let docW = window.innerWidth;let elW = el.getBoundingClientRect().width;let elH = el.getBoundingClientRect().height;let newLeft = left>0 ? left : 0;let newTop = top>0 ? top : 0;newLeft = left>docW - elW ? docW - elW : left;newTop = top>docH - elH ? docH - elH : top;el.style.left = `${newLeft}px`;el.style.top = `${newTop}px`;};//鼠標事件結束，清除事件const dragEnd = () => {document.removeEventListener('mousemove', dragMove);document.removeEventListener('mouseup', dragEnd);}
}export default {install(app) {app.directive('draggable', {mounted(el, binding) {draggable(el, binding);},updated(el, binding) {draggable(el, binding);},});}
};

• draggable.vue(只是簡單的使用例子，參考用。)

<script setup>
</script><template><div class="app"><div class="draggable-box" v-draggable> </div></div>
</template>
<style lang="scss" scoped>
.draggable-box{background: #f00;width: 100px;height: 100px;position: absolute;
}
.app{background: #333;width: 100vw;height: 100vh;position: relative;
}
</style>

2-3.自動聚焦（v2 和 v3）

效果展示：

• vue2自動聚焦

//vue2
Vue.directive('focus', {inserted: function (el) {if (el.focus)el.focus();const input = el.querySelector('input');if (input)input.focus();}
});

• vue3自動聚焦

//vue3
app.directive('focus', {mounted(el) {if (el.focus)el.focus();const input = el.querySelector('input');if (input)input.focus();},
});

3.參考資源

1. vue3.js官方網站：https://cn.vuejs.org/
2. vue2.js官方網站：https://v2.cn.vuejs.org/