<template>
<div class="dropdown">
<button @click="toggleDropdown">Toggle Dropdown</button>
<div v-if="isOpen" class="dropdown-menu">
<p>Dropdown Content</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false
};
},
methods: {
toggleDropdown() {
this.isOpen = !this.isOpen;
},
closeDropdown() {
this.isOpen = false;
}
},
mounted() {
document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside);
},
methods: {
handleClickOutside(event) {
const dropdown = this.$el;
if (!dropdown.contains(event.target)) {
this.closeDropdown();
}
}
}
};
</script>
<style scoped>
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
z-index: 1000;
}
</style>
vue中页面下拉组件 点击页面其他地方收起组件
最新推荐文章于 2024-07-25 09:24:40 发布