vue点击区域外，隐藏当前展示区域部分

大致需求就是，点击按钮，展示出来一个区域块，点击区域块内，区域块不隐藏，点击区域块以外的地方，就会隐藏

vue2场景下

<template><div><div class="box" @click="showCon = !showCon">按钮</div><ul class="content" ref="showContent" v-show="showCon"><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul></div>
</template><script>
export default ({name: 'App',data(){return{showCon:false,showContent:null,}},watch:{showCon:{handler(newVal, olVal) {console.log(olVal);if (newVal) {setTimeout(() => {document.addEventListener('click', this.checkClick);}, 0);} else {document.removeEventListener('click', this.checkClick);}}}},methods: {checkClick(event) {let dom = this.$refs.showContent; // 这里是你的下拉菜单元素console.log(dom);console.log(dom.contains(event.target));if (!dom.contains(event.target)) {// 不在菜单范围，隐藏即可if (this.showCon) {this.showCon = false;document.removeEventListener('click', this.checkClick);}}}},unmounted() {document.removeEventListener('click', checkClick);};
})
</script><style lang="scss">
.box{width: 100px;height: 40px;line-height: 40px;cursor: pointer;background: lightblue;text-align: center;
}
.content{width: 200px;border: 1px solid #ccc;
}
</style>

vue3环境下

<template><div><div class="box" @click="showCon = !showCon">按钮</div><ul class="content" ref="showContent" v-show="showCon"><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul></div>
</template><script>import {defineComponent,watch,ref,onUnmounted,
} from 'vue';
export default defineComponent({name: 'App',setup(){const showCon = ref(false);const showContent = ref(null);const checkClick = (event) => {let dom = showContent.value; // 这里是你的下拉菜单元素console.log(dom);console.log(dom.contains(event.target));if (!dom.contains(event.target)) {// 不在菜单范围，隐藏即可if (showCon.value) {showCon.value = false;document.removeEventListener('click', checkClick);}}}watch(() => showCon.value,(n) => {if (n) {setTimeout(() => {document.addEventListener('click', checkClick);}, 0);} else {document.removeEventListener('click', checkClick);}},);onUnmounted(() => {document.removeEventListener('click', checkClick);});return {showCon,showContent,}},
})
</script><style lang="scss">
.box{width: 100px;height: 40px;line-height: 40px;cursor: pointer;background: lightblue;text-align: center;
}
.content{width: 200px;border: 1px solid #ccc;
}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！