本文总结了vue3下ClickOutside的实现逻辑,从工具函数封装,到自定义指令的学习,再到源码的深入学习;虽然ClickOutside的整体逻辑并不是很复杂,但是刚开始笔者阅读源码的时候,很难理解其中的一些用法;尤其是在事件的注册,为什么不用click,而是使用mouseup/mousedown两个事件组合;经过深入的思考和对比,才慢慢理解作者的用意。
在Vue中，诸如v-if、v-for、v-on等等被称之为内置指令，它们都是以v-开头的，我们无需注册即可在...
而v-click-outside是Vue.js中常用的一个自定义指令,用于判断点击事件是否在指定元素外部。本文将详细介绍Vue3中v-click-outside的使用方法和示例。 二、为什么需要v-click-outside指令 在前端开发过程中,经常会遇到需要判断用户是否点击了某个元素外部的情况。当用户点击页面空白处时,需要触发某个事件或隐藏某个...
vue3 自定义指令 v-click-outside export default function registerDirectives(app: App) { app.directive('click-outside', { mounted(el: any, bindings: any) { el.handler = function (e: any) { if (!el.contains(e.target)) { bindings.value(e) } } document.addEventListener('click', el....
v-clickoutside的基本实现步骤 定义指令:在Vue3中,可以通过app.directive方法定义一个全局指令,或者通过组件的directives选项定义一个局部指令。 添加事件监听:在指令的mounted钩子中,为document对象添加点击事件监听器。 检查点击位置:在事件监听器中,检查点击事件的目标元素是否不在指令绑定的元素内部。如果是,则执行回调...
v-input:type v-draggable v-permission v-loading v-clickoutside 前言 Vue 在除了提供默认的十几个内置的指令外,还允许开发人员根据实际情况自定义指令,那我们在何时使用它呢? 在Vue的项目中,大多数情况下,你都可以操作数据来修改视图,也就是所谓的操作DOM,但是还是避免不了偶尔要操作原生DOM,当我们需要操作DOM...
在使用clickOutside的时候,我们给value传入绑定函数,因此binding.value的值接收到的其实是一个函数: <template> </template> < setup> const onClickOutside = => { // .. } </> 我们在上面定义的eventHandler函数也是点击事件的触发函数,判断事件的target是否包含在el节点中,如果不在的话就执行binding....
ClickOutside指令可以用于检测用户是否点击了组件外部的区域。这在一些情况下非常有用,例如当我们希望在点击组件外部时关闭弹出窗口或下拉菜单。 在Vue2中,我们通常需要手动编写一个指令来实现这样的功能。但在Vue3的Script Setup中,我们可以直接使用现成的ClickOutside指令,而不需要额外的代码。 首先,我们需要在组件的...
深入理解Vue3自定义指令ClickOutside的实现 本文深入解析自定义指令ClickOutside的实现逻辑与原理，旨在为开发者提供清晰的理解路径。通过工具函数on和off的使用，理解事件绑定与解除绑定的基本操作。此外，介绍了在naive-ui-admin源码中on和off函数的高效应用，以及如何使用它们扩展为一次性事件处理函数once。...
v-click-outside指令 常见下拉框组件，点击下拉框外部其他地方，可以收起下拉框。实现这种效果可以在目标...