---

前言

書接上文，在Vue3中，自定義指令是一種強大的工具，允許我們擴展HTML元素的功能。通過自定義指令，我們可以創建可重用的行為，并將它們綁定到任何元素上。下面，本文備份一些簡單的Vue3自定義指令超實用案例，并解釋其實際應用場景。：

---

一、一些簡單的Vue3自定義指令超實用案例

v-focus - 自動聚焦輸入框

const app = Vue.createApp({data() {return {// ...}}
});app.directive('focus', {mounted(el) {el.focus();}
});

使用方式：

<input v-focus />

v-tooltip - 顯示工具提示

app.directive('tooltip', {mounted(el, binding) {el.title = binding.value;},updated(el, binding) {el.title = binding.value;}
});

使用方式：

<span v-tooltip=" '這是一個提示信息' ">鼠標懸停</span>

v-click-outside - 點擊元素外部時觸發事件

app.directive('click-outside', {mounted(el, binding) {el.clickOutsideEvent = event => {if (!(el == event.target || el.contains(event.target))) {binding.value(event, el);}};document.body.addEventListener('click', el.clickOutsideEvent);},unmounted(el) {document.body.removeEventListener('click', el.clickOutsideEvent);}
});

使用方式：

<div v-click-outside="closeDropdown"><!-- ... -->
</div>

v-draggable - 使元素可拖拽

app.directive('draggable', {mounted(el) {el.style.cursor = 'move';el.style.position = 'fixed';let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;el.onmousedown = dragMouseDown;function dragMouseDown(e) {e = e || window.event;e.preventDefault();pos3 = e.clientX;pos4 = e.clientY;document.onmouseup = closeDragElement;document.onmousemove = elementDrag;}function elementDrag(e) {e = e || window.event;e.preventDefault();pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;el.style.top = (el.offsetTop - pos2) + 'px';el.style.left = (el.offsetLeft - pos1) + 'px';}function closeDragElement() {document.onmouseup = null;document.onmousemove = null;}}
});

使用方式：

<div v-draggable>拖拽我
</div>

v-scroll - 監聽元素的滾動事件

app.directive('scroll', {mounted(el, binding) {el.addEventListener('scroll', binding.value);},unmounted(el, binding) {el.removeEventListener('scroll', binding.value);}
});

使用方式：

<div v-scroll="handleScroll"><!-- 內容 -->
</div>

這些自定義指令可以大大提高開發效率，幫助開發者實現一些常見且實用的功能。在實際開發中，你可以根據具體需求來定制自己的指令。

---

總結

在平凡的日子里，種下夢想的種子，靜候花開。