vue自定义弹窗点击除了自己区域外关闭弹窗

这里使用到vue的自定义指令

javascript 复制代码
         <div class="item" v-clickoutside="clickoutside1">
            <div @click="opencity" class="text"
              :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }">选择地区
            </div>
            <i v-if="popup.iscitypop || okcitylist.length != 0" class=" el-icon-arrow-up"
              :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }"></i>
            <i v-else class="el-icon-arrow-down"
              :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }"></i>
            //绝对定位样式 popup.iscitypop true展示 false隐藏
            <div class="poppad" v-if="popup.iscitypop">
              <div class="tit" v-for="(item, index) in citylist" :key="index">
                {{ item.n }}
                <div class="cit">
                  <div class="items" :class="its.isactive ? 'active' : ''" v-for="(its, ind) in item.s" :key="ind"
                    @click.stop="changeCity(its, ind)">
                    {{ its.n }}
                  </div>
                </div>
              </div>
            </div>
          </div>


export default {
  directives: {
    clickoutside: {
      bind: function (el, binding, vnode) {
        function documentHandler(e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener("click", documentHandler);
      },
      unbind: function (el, binding) {
        document.removeEventListener("click", el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
}
相关推荐
爱看书的小沐1 天前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
程序员王天1 天前
【开发AGIC】Vue3+NestJS+DeepSeek AI作业批改系统(已开源)
vue.js·ai编程·nestjs
井柏然1 天前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
昔冰_G1 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
IT_陈寒1 天前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry1 天前
elpis之动态组件机制
javascript·vue.js·架构
井柏然1 天前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊1 天前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang1 天前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..1 天前
通过git拉取前端项目
java·前端·git·vscode·拉取代码