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__;
      }
    }
  },
}
相关推荐
Rhys..43 分钟前
ES6是什么
前端·javascript·es6
Jammingpro2 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI8 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front9 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie9 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀9 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻9 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树10 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔10 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app