app直播源码,弹出下拉框时可以点击任意区域关闭
1.实现原理
mounted:初始化页面完成后,再对html的dom节点进行一些需要的操作组件
添加点击事件监听document.addEventListener,假设点击区域不再该区域上,关闭弹框
2.实现代码
<template> <div> <div> <div> <div class="hd_sel flex-row j_b" @click="show_month = !show_month" ref="s1" > <div>{{ current_month }}</div> <div :class="{ top: show_month, bot: !show_month }" ></div> </div> </div> <div> <div v-show="show_month"> <div 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 scoped> .drop_hd_ative { 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直播源码,弹出下拉框时可以点击任意区域关闭,更多内容欢迎关注之后的文章