Vue3实战笔记(64)—Vue 3自定义指令的艺术:实战中的最佳实践
前言
书接上文,在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>
这些自定义指令可以大大提高开发效率,帮助开发者实现一些常见且实用的功能。在实际开发中,你可以根据具体需求来定制自己的指令。
总结
在平凡的日子里,种下梦想的种子,静候花开。
原文地址:https://blog.csdn.net/loveshenhaitao/article/details/140160732
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!