实现点击按钮显示下拉框,点击下拉框外面部分下拉框关闭(点击下拉框里面部分下拉框不关闭)。
实现效果:
实现代码:
<template>
<div style="position: relative;">
<button ref="selectButton" @click="toggleDropdown">显示下拉框</button>
<div v-if="isDropdownVisible" ref="dropdown" class="dropdown">
<!-- 下拉框内容 -->
<!-- ... -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isDropdownVisible: false, // 下拉框的显示状态
};
},
mounted() {
// 监听点击事件,用于关闭下拉框
window.addEventListener('click', this.handleClickOutside);
},
beforeUnmount() {
// 移除点击事件监听器
window.removeEventListener('click', this.handleClickOutside);
},
methods: {
toggleDropdown() {
this.isDropdownVisible = !this.isDropdownVisible; // 切换下拉框的显示状态
},
handleClickOutside(event) {
// 判断点击事件的目标是否在下拉框内部或按钮内部,如果不在,则关闭下拉框
if (this.$refs.dropdown
&& !this.$refs.dropdown.contains(event.target)
&& !this.$refs.selectButton.contains(event.target)) {
this.isDropdownVisible = false;
}
},
},
};
</script>
<style scoped lang="scss">
.dropdown {
position: absolute;
top: 100%; /* 下拉框相对于按钮的位置 */
left: 0;
width: 200px;
background-color: #cc2424;
border: 1px solid #ccc;
padding: 10px;
z-index: 9999;
}
</style>
注意上面实现效果和这个实现代码稍微有点不一样,不过差不多,因为实现效果是实际项目的,里面代码太复杂了,这边就把最基本的功能代码写出来。
注意:这里用的是vue3.
在上述示例中,通过在mounted生命周期钩子中添加点击事件的监听器,监听整个窗口的点击事件。在beforeUnmount生命周期钩子中移除事件监听器,以避免在组件销毁时仍然监听点击事件。
在handleClickOutside方法中,判断点击事件的目标是否在下拉框的DOM元素内部或按钮的DOM元素内部。如果点击的目标既不在下拉框内部,也不是按钮本身,则将isDropdownVisible设置为false,从而关闭下拉框。
通过以上方式,你可以实现点击下拉框以外的任意位置关闭下拉框的功能。