添加点击图标切换菜单栏显示与隐藏
时间: 2024-01-16 13:02:37 浏览: 35
好的,以下是添加点击图标切换菜单栏显示与隐藏的步骤:
1. 在侧边菜单组件中添加切换菜单栏的方法
首先,你需要在侧边菜单组件中添加一个方法来切换菜单栏的显示和隐藏。以下是一个基本的切换方法示例:
```
<template>
<div class="sidebar-menu">
<i class="el-icon-s-fold" @click="toggleSidebar"></i>
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router :collapse="isCollapsed">
<el-menu-item index="/">
<i class="el-icon-menu"></i>
<span>首页</span>
</el-menu-item>
<el-menu-item index="/about">
<i class="el-icon-info"></i>
<span>关于我们</span>
</el-menu-item>
<el-menu-item index="/contact">
<i class="el-icon-phone"></i>
<span>联系我们</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'SidebarMenu',
setup() {
const isCollapsed = ref(false)
const toggleSidebar = () => {
isCollapsed.value = !isCollapsed.value
}
return {
isCollapsed,
toggleSidebar,
}
},
})
</script>
<style>
.sidebar-menu {
height: 100%;
background-color: #f0f2f5;
padding: 20px;
}
.sidebar-menu i.el-icon-s-fold {
font-size: 20px;
cursor: pointer;
margin-bottom: 10px;
}
</style>
```
在这个示例中,我们添加了一个切换方法`toggleSidebar`,用来切换`isCollapsed`的值。我们还在模板中添加了一个图标,当点击图标时会触发切换方法。
2. 在App组件中绑定菜单栏的显示与隐藏
接下来,你需要在App组件中绑定菜单栏的显示与隐藏。以下是一个基本的App组件示例:
```
<template>
<div class="app">
<el-container>
<el-aside :width="isCollapsed ? '70px' : '200px'" :collapse="isCollapsed" @collapse="toggleSidebar">
<sidebar-menu></sidebar-menu>
</el-aside>
<el-container>
<router-view></router-view>
</el-container>
</el-container>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import SidebarMenu from './components/SidebarMenu.vue'
export default defineComponent({
name: 'App',
components: {
SidebarMenu,
},
setup() {
const isCollapsed = ref(false)
const toggleSidebar = () => {
isCollapsed.value = !isCollapsed.value
}
return {
isCollapsed,
toggleSidebar,
}
},
})
</script>
<style>
.app {
height: 100%;
}
</style>
```
在这个示例中,我们在`el-aside`组件中绑定了菜单栏的宽度和是否折叠的属性。并且在`el-aside`组件中添加了一个`@collapse`事件,用来在菜单栏折叠时触发切换方法。我们还在App组件的setup函数中定义了`isCollapsed`和`toggleSidebar`。
3. 完成
现在,你已经添加了点击图标切换菜单栏显示与隐藏的功能。你可以根据你的需求自定义图标和样式。
希望这可以帮助到你!
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)