Vue3实战笔记(64)—Vue 3自定义指令的艺术:实战中的最佳实践

文章目录


前言

书接上文,在Vue3中,自定义指令是一种强大的工具,允许我们扩展HTML元素的功能。通过自定义指令,我们可以创建可重用的行为,并将它们绑定到任何元素上。下面,本文备份一些简单的Vue3自定义指令超实用案例,并解释其实际应用场景。:


一、一些简单的Vue3自定义指令超实用案例

v-focus - 自动聚焦输入框

javascript 复制代码
const app = Vue.createApp({
  data() {
    return {
      // ...
    }
  }
});

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

使用方式:

javascript 复制代码
<input v-focus />

v-tooltip - 显示工具提示

javascript 复制代码
app.directive('tooltip', {
  mounted(el, binding) {
    el.title = binding.value;
  },
  updated(el, binding) {
    el.title = binding.value;
  }
});

使用方式:

javascript 复制代码
<span v-tooltip=" '这是一个提示信息' ">鼠标悬停</span>

v-click-outside - 点击元素外部时触发事件

javascript 复制代码
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);
  }
});

使用方式:

javascript 复制代码
<div v-click-outside="closeDropdown">
  <!-- ... -->
</div>

v-draggable - 使元素可拖拽

javascript 复制代码
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;
    }
  }
});

使用方式:

javascript 复制代码
<div v-draggable>
  拖拽我
</div>

v-scroll - 监听元素的滚动事件

javascript 复制代码
app.directive('scroll', {
  mounted(el, binding) {
    el.addEventListener('scroll', binding.value);
  },
  unmounted(el, binding) {
    el.removeEventListener('scroll', binding.value);
  }
});

使用方式:

javascript 复制代码
<div v-scroll="handleScroll">
  <!-- 内容 -->
</div>

这些自定义指令可以大大提高开发效率,帮助开发者实现一些常见且实用的功能。在实际开发中,你可以根据具体需求来定制自己的指令。


总结

在平凡的日子里,种下梦想的种子,静候花开。

相关推荐
.生产的驴8 分钟前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
艾小码29 分钟前
ES6+革命:8大特性让你的JavaScript代码质量翻倍
前端·javascript
两个西柚呀33 分钟前
Vue组件的一些底层细节
前端·javascript·vue.js
paopaokaka_luck33 分钟前
基于SpringBoot+Vue的DIY手工社预约管理系统(Echarts图形化、腾讯地图API)
java·vue.js·人工智能·spring boot·后端·echarts
骁的小小站3 小时前
Verilator 和 GTKwave联合仿真
开发语言·c++·经验分享·笔记·学习·fpga开发
kkkkk0211064 小时前
软考高级-系统架构设计师案例专题三:系统开发基础
笔记·系统架构
计算机学姐5 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
新子y8 小时前
【小白笔记】区分类方法/实例方法和静态函数/命名空间函数
笔记·分类
哆啦A梦15888 小时前
点击Top切换数据
前端·javascript·vue.js
梁辰兴9 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统