点击空白处弹出框取消

新建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中写相应的逻辑

相关推荐
可缺不可滥4 分钟前
前端 性能优化 (图片与样式篇)
前端·性能优化
Bug从此不上门5 分钟前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图20934 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉39 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time1 小时前
爬虫学习8
开发语言·javascript·爬虫·python·算法
星叔1 小时前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か2 小时前
打字机效果显示
前端·vue3·antv
海绵波波1072 小时前
Webserver(4.5)复用
android·开发语言·javascript