vue自界说弹窗点击除了自己区域外关闭弹窗

这里使用到vue的自界说指令

1.          <div class="item" v-clickoutside="clickoutside1">
2.             <div @click="opencity" class="text"
3.               :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }">选择地区
4.             </div>
5.             <i v-if="popup.iscitypop || okcitylist.length != 0" class=" el-icon-arrow-up"
6.               :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }"></i>
7.             <i v-else class="el-icon-arrow-down"
8.               :style="{ color: popup.iscitypop || okcitylist.length != 0 ? '#FF9500' : '#000000' }"></i>
9.             //绝对定位样式 popup.iscitypop true展示 false隐藏
10.             <div class="poppad" v-if="popup.iscitypop">
11.               <div class="tit" v-for="(item, index) in citylist" :key="index">
12.                 {{ item.n }}
13.                 <div class="cit">
14.                   <div class="items" :class="its.isactive ? 'active' : ''" v-for="(its, ind) in item.s" :key="ind"
15.                     @click.stop="changeCity(its, ind)">
16.                     {{ its.n }}
17.                   </div>
18.                 </div>
19.               </div>
20.             </div>
21.           </div>
24. export default {
25.   directives: {
26.     clickoutside: {
27.       bind: function (el, binding, vnode) {
28.         function documentHandler(e) {
29.           if (el.contains(e.target)) {
30.             return false;
31.           }
32.           if (binding.expression) {
33.             binding.value(e);
34.           }
35.         }
36.         el.__vueClickOutside__ = documentHandler;
37.         document.addEventListener("click", documentHandler);
38.       },
39.       unbind: function (el, binding) {
40.         document.removeEventListener("click", el.__vueClickOutside__);
41.         delete el.__vueClickOutside__;
42.       }
43.     }
44.   },
45. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。