app直播源码,弹出下拉框时可以点击任意区域关闭
2022/5/25 1:21:39
本文主要是介绍app直播源码,弹出下拉框时可以点击任意区域关闭,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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直播源码,弹出下拉框时可以点击任意区域关闭,更多内容欢迎关注之后的文章
这篇关于app直播源码,弹出下拉框时可以点击任意区域关闭的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行