点击空白处弹出框取消

新建click-outside.js文件

javascript 复制代码
const clickoutsideContext = '@@clickoutsideContext'

export default {
  /*
   @param el 指令所绑定的元素
   @param binding {Object} 
   @param vnode vue编译生成的虚拟节点
   */
  bind(el, binding, vnode) {
    const documentHandler = function(e) {
      if (!vnode.context || el.contains(e.target)) {
        return false
      }
      if (binding.expression) {
        vnode.context[el[clickoutsideContext].methodName](e)
      } else {
        el[clickoutsideContext].bindingFn(e)
      }
    }
    el[clickoutsideContext] = {
      documentHandler,
      methodName: binding.expression,
      bindingFn: binding.value
    }
    setTimeout(() => {
      document.addEventListener('click', documentHandler)
    }, 0)
  },
  update(el, binding) {
    el[clickoutsideContext].methodName = binding.expression
    el[clickoutsideContext].bindingFn = binding.value
  },
  unbind(el) {
    document.removeEventListener(
      'click',
      el[clickoutsideContext].documentHandler
    )
  }
}

全局使用在main.js中引入,我这里是在assets/js文件中,引入时按照自己的路径引入

javascript 复制代码
import clickOutside from '../../assets/js/click-outside'
Vue.directive('clickoutside', clickOutside)

页面使用,在弹框元素上添加v-clickoutside="事件名"

在methods中写相应的逻辑

相关推荐
bysking14 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓30 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_41133 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v35 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js