vue自定义弹窗点击除了自己区域外关闭弹窗
这里使用到vue的自定义指令
<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__;
}
}
},
}
原文地址:https://blog.csdn.net/qq_61869009/article/details/144358050
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!