前言
- 在【自定义指令---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.全局注册
javascript
app.directive('highlight',{
mounted(el,binding) {
el.focus()
}
})2.局部注册，即组件中注册
javascript
directives: {
highlight: {
mounted(el,binding) {
el.focus()
}
}2.常用自定义指令代码分享
2-1.搜索文本高亮
展示效果：
解释说明：
- 效果：
- 搜索到的结果列表中匹配搜索关键字，并高亮展示；
- 实现方式：
- 获取元素节点，以及节点中的数据
- 使用正则去匹配对应字段；
- 生成新的元素，去替换匹配的部分。
- 使用场景：搜索结果展示，突然搜索关键字
- 使用注意：
- 当前这种方式因为执行在mounted 钩子函数中，只在节点加载第一次时执行，所以要想实现如上所示，就使用了定时器的异步加载，先清除，再重新过滤结果，重新加载。
- 如果有更好的办法，可以留言，欢迎指正。
代码分享：
- highlight.js
javascript
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 中全局注册
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')- 使用组件(只是简单的使用例子，参考用。)
javascript
<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
javascript
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(只是简单的使用例子，参考用。)
js
<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自动聚焦
js
//vue2
Vue.directive('focus', {
inserted: function (el) {
if (el.focus)
el.focus();
const input = el.querySelector('input');
if (input)
input.focus();
}
});- vue3自动聚焦
js
//vue3
app.directive('focus', {
mounted(el) {
if (el.focus)
el.focus();
const input = el.querySelector('input');
if (input)
input.focus();
},
});3.参考资源
- vue3.js官方网站：https://cn.vuejs.org/
- vue2.js官方网站：https://v2.cn.vuejs.org/