Vue常用自定义指令-积累的魅力【VUE】

前言

• 在【自定义指令—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/