要将“展开”和“收起”的功能从使用 el-radio-group 切换为点击图标，你可以按照以下步骤修改代码：
- 移除
el-radio-group组件。 - 添加两个图标按钮，一个用于展开，另一个用于收起。
- 在点击图标时切换
isCollapse的状态。
下面是修改后的代码示例：
<template>
<div>
<el-button @click="toggleCollapse" style="margin-bottom: 20px;">
<el-icon v-if="isCollapse"><Fold /></el-icon>
<el-icon v-else><Expand /></el-icon>
</el-button>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<!-- 其他菜单项 -->
<el-menu-item index="2">
<i class=" el-icon menu"></i>
<span slot='title'>导航二</span>
</ el - menu - item >
...
</ el - menu >
<!-- 样式 -->
<style scoped>
. el - menu - vertical - demo:not(. el - menu -- collapse) {
width: 200px;
min-height: 400px;
}
</ style >
</div >
</template>
<script>
// 导入需要的图标组件
import { Fold, Expand } from '@element-plus/icons-vue';
export default {
components: {
Fold,
Expand,
},
data() {
return {
isCollapse: true,
};
},
methods: {
toggleCollapse() {
this.isCollapse = !this.isCollapse;
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style scoped>
// 如果有样式调整，可以在这里添加
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
}
</style>
修改说明：
- 使用了
<button>元素和条件渲染来实现点击图标切换功能。 toggleCollapse方法用于切换isCollapse的值，从而控制菜单的展开与收起状态。
这样就可以通过点击图标来实现菜单的展开和收起功能。
内容由零声教学AI助手提供，问题来源于学员提问
