app直播源码，弹出下拉框时可以点击任意区域关闭
1.实现原理
mounted：初始化页面完成后，再对html的dom节点进行一些需要的操作组件
添加点击事件监听document.addEventListener，假设点击区域不再该区域上，关闭弹框
2.实现代码
<template>
<div>
<div>
<div class="flex-row">
<div
class="hd_sel flex-row j_b"
@click="show_month = !show_month"
ref="s1"
>
<div>{
{
current_month }}</div>
<div
class="arrow"
:class="{ top: show_month, bot: !show_month }"
></div>
</div>
</div>
<div class="hd_e">
<div v-show="show_month" class="drop_hd">
<div
class="drop_hd_item"
v-for="(item, index) in month_list"
:class="{ drop_hd_ative: current_month == item.name }"
:key="index"
@click="choseItem(item, index)"
>
{
{
item.name }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "dropItem",
data() {
return {
current_month: "All",
show_month: false,
month_list: [
{
name: "All",
},
{
name: "2022-1",
},
{
name: "2022-2",
},
],
};
},
mounted() {
document.addEventListener(
"click",
(e) => {
let s1 = this.$refs.s1;
if (!s1.contains(e.target)) {
this.show_month = false;
}
},
true
);
},
methods: {
choseItem(e) {
this.current_month = e.name;
this.show_month = false;
},
},
};
</script>
<style lang="less" scoped>
.drop_hd_ative {
background-color: pink;
color: #fff !important;
}
.drop_hd_item {
line-height: 30px;
color: #333;
}
.drop_hd {
position: absolute;
width: 200px;
min-height: 30px;
box-sizing: border-box;
padding: 10px;
background: #fff;
left: 0;
top: 3px;
border-radius: 5px;
z-index: 99;
box-shadow: 5px 5px 5px #ccc;
cursor: pointer;
}
.hd_e {
position: relative;
}
.hd_sel {
margin-top: 50px;
min-width: 200px;
height: 32px;
background: rgba(243, 243, 243);
border-radius: 8px;
box-sizing: border-box;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
position: relative;
cursor: pointer;
}
.arrow {
border-width: 6px;
border-bottom: 0;
border-color: #fff transparent transparent transparent;
border-style: solid;
width: 0;
height: 0;
transition: transform 0.3s;
margin-left: 10px;
&.bot {
transform: rotate(0deg);
}
&.top {
transform: rotate(-180deg);
}
}
</style>
以上就是 app直播源码，弹出下拉框时可以点击任意区域关闭，更多内容欢迎关注之后的文章