vue 实现弹出列表
实现弹出列表的常见方法
使用 Vue 原生组件
通过 v-if 或 v-show 控制列表的显示与隐藏，结合 CSS 实现动画效果。
<template>
<div>
<button @click="showList = !showList">Toggle List</button>
<ul v-show="showList" class="popup-list">
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
showList: false,
items: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' }
]
}
}
}
</script>
<style>
.popup-list {
position: absolute;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>使用第三方 UI 库 Element UI 或 Ant Design Vue 等库提供现成的下拉组件。
<template>
<el-select v-model="selected" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selected: '',
options: [
{ value: '1', label: 'Option 1' },
{ value: '2', label: 'Option 2' }
]
}
}
}
</script>自定义弹出层组件 创建可复用的弹出组件，通过插槽注入内容。
<!-- PopupList.vue -->
<template>
<div class="popup-wrapper">
<div class="trigger" @click="toggle">
<slot name="trigger"></slot>
</div>
<transition name="fade">
<div class="popup-content" v-show="isVisible">
<slot name="content"></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: false
}
},
methods: {
toggle() {
this.isVisible = !this.isVisible
}
}
}
</script>注意事项
- 点击外部关闭功能需监听 document 点击事件
- 考虑 z-index 层级问题
- 移动端需处理触摸事件
- 动画效果可使用 Vue 的 transition 组件
进阶实现 对于复杂场景，可结合 Vuex 管理弹出状态，或使用 Portal 技术将弹出层渲染到 body 末端避免父组件样式影响。
