vue实现侧滑菜单
Vue 侧滑菜单实现方法
使用 CSS 过渡和 Vue 指令
在 Vue 中可以通过 v-show 或 v-if 控制菜单显示，结合 CSS 过渡效果实现平滑动画。
<template>
<div class="menu-container">
<div class="menu-overlay" v-show="isOpen" @click="toggleMenu"></div>
<div class="side-menu" :class="{ 'open': isOpen }">
<!-- 菜单内容 -->
</div>
<button @click="toggleMenu">切换菜单</button>
</div>
</template>
<script>
export default {
data() {
return {
isOpen: false
}
},
methods: {
toggleMenu() {
this.isOpen = !this.isOpen
}
}
}
</script>
<style>
.menu-container {
position: relative;
}
.side-menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background: #fff;
transition: transform 0.3s ease;
}
.side-menu.open {
transform: translateX(250px);
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 10;
}
</style>使用第三方组件库
主流 UI 库如 Vuetify、Element UI 等提供现成的侧滑菜单组件。
Vuetify 示例：
<template>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item v-for="item in items" :key="item.title" :title="item.title"></v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: '首页' },
{ title: '关于' }
]
}
}
}
</script>手势滑动支持
添加 touch 事件处理实现手势滑动操作：
methods: {
handleTouchStart(e) {
this.startX = e.touches[0].clientX
},
handleTouchMove(e) {
this.currentX = e.touches[0].clientX
const diff = this.startX - this.currentX
if (diff > 50) {
this.isOpen = true
} else if (diff < -50) {
this.isOpen = false
}
}
}响应式处理
通过媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
.side-menu {
width: 200px;
}
}状态管理
对于复杂应用，建议使用 Vuex 或 Pinia 管理菜单状态：
// store.js
export default {
state: {
menuOpen: false
},
mutations: {
toggleMenu(state) {
state.menuOpen = !state.menuOpen
}
}
}实现侧滑菜单时需考虑性能优化、无障碍访问和浏览器兼容性等问题。根据项目需求选择合适方案，简单场景可使用纯 CSS 方案，复杂项目建议采用成熟的 UI 组件库。
