首页 > 其他分享 >支持ignore的`v-clickoutside`指令

支持ignore的`v-clickoutside`指令

时间:2023-06-01 09:03:37浏览次数:42  
标签:__ el target ignore clickoutside vueClickOutside 指令

clickoutside: {
  bind(el, binding, vnode) {
    function handleClickOutside(e) {
      console.log('e.target', e.target);
      if (e.target === el || el.contains(e.target) ||  e.target.closest('.ignore')) {
		return
	  }
      binding.value(e)
    }
    el.__vueClickOutside__ = handleClickOutside 
    document.addEventListener('click', handleClickOutside)
  },
  unbind(el) {
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

使用方式

<div class="outer">
  <div class="ignore"></div>
  <div class="inner" v-clickoutside="doSome"></div>
<div>

当我们点击.inner之外的div时,将会触发v-clickoutside绑定的doSome事件,
但是inner上方有一个带着.ignore的div当点击这个div时,不会触发doSome事件

标签:__,el,target,ignore,clickoutside,vueClickOutside,指令
From: https://www.cnblogs.com/wsd413/p/17447909.html

相关文章

  • Linux环境下耗尽cpu占用率的指令
     模拟cpu打满foriin`seq1$(cat/proc/cpuinfo|grep"physicalid"|wc-l)`doddif=/dev/zeroof=/dev/null&done 模拟内存打满生产大文件ddif=/dev/zeroof=testbs=1Mcount=2000然后vi打开 vimtest&这种也可以。使用top命令查看linux系统cpu使用情况:#......
  • vue3 整数还是显示整数,有小数的保留两位小数显示,写一个指令
    1、新建number-format.tsimport{Directive,DirectiveBinding}from"vue";constnumberFormat:Directive={ mounted(el,binding:DirectiveBinding){  constvalue=binding.value.text||"0";  constparsedValue=parseFloat(valu......
  • vue3 整数还是显示整数,有小数的保留两位小数显示,并显示千分符,写一个指令
    1、新建number-thousander-format.tsimport{Directive,DirectiveBinding}from"vue";constnumberThousanderFormat:Directive={ mounted(el,binding:DirectiveBinding){  constvalue=binding.value.text||"0";  constparsedV......
  • Vue基本知识1,安装创建以及常用指令
    Vue基本知识1,安装创建以及常用指令1.Vue的概念概念vue是一个渐进式的JavaScript开发框架;基于MVVM实现数据驱动的框架官网还可以用来做SPA(singlepagewebapplication):一个网页就是一个应用;例如网易云特点体积小速廈快数据双向绑定生态丰富学习成本低2.安......
  • linux常用指令(文本编辑)
    (1).vim 安装vimyuminstallvim命令命令模式--vim文件名字或者编辑模式按esc进入i--在光标的前面插入字符a--在光标的后面添加入字符o--在光标下一行插入字符编辑模式--命令行模式按i进入yy--复制当前行p--粘贴dd--删除当前行......
  • linux常用指令(拷贝移动命令)
    (1).cp--复制cphello.txtitcast/--将hello.txt复制到itcast目录中cphello.txt./hi.txt--将hello.txt复制到当前目录,并改名为hi.txtcp-ritcast/./itheima/--将itcast目录和目录下所有文件复制到itheima目录下cp-ritcast/*./itheima/--将itcas......
  • 3模型机指令系统设计-2【FPGA模型机课程设计】
    3模型机指令系统设计-2【FPGA模型机课程设计】前言推荐3模型机指令系统设计-2安排MIPS12条整数指令测试与结果乘除法指令实现和功能仿真要点1乘法除法指令格式2通路增加部件3对整体通路的影响4功能验证代码设计defineIDEXEX1HiLo高位低位寄存器MIPSInstMem附录0框架1defin......
  • 计算机组成原理 L02 指令集体系结构(ISA)复习-1
    计算机组成原理L02指令集体系结构(ISA)复习-1复习-1用作例题/课后题整理复习-2用作理论知识点整理如何使用大常数由于大数值范围:[-2^31,2^31-1],而I型指令常数字段只有16bits,所以需要使用两次I型指令。取立即数到寄存器高16位指令lui->loadupperimmediate与立即数进......
  • 安装不同版本的Python,并用不同指令运行想要运行的那个版本的python
    1、安装所需版本的Python,注意与其他版本的Python放在不同的文件夹下;例如这里我分别安装了Python2.7和Python3.7在D盘的两个文件夹中。2、设置这两个Python的环境变量,分别定位到这两个版本python.exe所在的目录下 3、将两个目录下的python.exe分别修改为python2.exe和python3......
  • find查找指令使用
    #在某个目录下查看含有某个字段的文件find.|xargsgrep"custom"#lldb调试core文件指令:lldb-c/storage/data/core/core_processor.136668.sz-lab-005.1670427164--mainboard-dmodules/planning/dag/planning.dag#当然会想只查看文件,不查看目录find.-typef......