ZBLOG

展开 收起

要将“展开”和“收起”的功能从使用 el-radio-group 切换为点击图标,你可以按照以下步骤修改代码:

  1. 移除 el-radio-group 组件。
  2. 添加两个图标按钮,一个用于展开,另一个用于收起。
  3. 在点击图标时切换 isCollapse 的状态。

下面是修改后的代码示例:

  1. <template>
  2. <div>
  3. <el-button @click="toggleCollapse" style="margin-bottom: 20px;">
  4. <el-icon v-if="isCollapse"><Fold /></el-icon>
  5. <el-icon v-else><Expand /></el-icon>
  6. </el-button>
  7. <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  8. <el-submenu index="1">
  9. <template slot="title">
  10. <i class="el-icon-location"></i>
  11. <span slot="title">导航一</span>
  12. </template>
  13. <el-menu-item-group>
  14. <span slot="title">分组一</span>
  15. <el-menu-item index="1-1">选项1</el-menu-item>
  16. <el-menu-item index="1-2">选项2</el-menu-item>
  17. </el-menu-item-group>
  18. <el-menu-item-group title="分组2">
  19. <el-menu-item index="1-3">选项3</el-menu-item>
  20. </el-menu-item-group>
  21. <el-submenu index="1-4">
  22. <span slot="title">选项4</span>
  23. <el-menu-item index="1-4-1">选项1</el-menu-item>
  24. </el-submenu>
  25. </el-submenu>
  26. <!-- 其他菜单项 -->
  27. <el-menu-item index="2">
  28. <i class=" el-icon menu"></i>
  29. <span slot='title'>导航二</span>
  30. </ el - menu - item >
  31. ...
  32. </ el - menu >
  33. <!-- 样式 -->
  34. <style scoped>
  35. . el - menu - vertical - demo:not(. el - menu -- collapse) {
  36. width: 200px;
  37. min-height: 400px;
  38. }
  39. </ style >
  40. </div >
  41. </template>
  42. <script>
  43. // 导入需要的图标组件
  44. import { Fold, Expand } from '@element-plus/icons-vue';
  45. export default {
  46. components: {
  47. Fold,
  48. Expand,
  49. },
  50. data() {
  51. return {
  52. isCollapse: true,
  53. };
  54. },
  55. methods: {
  56. toggleCollapse() {
  57. this.isCollapse = !this.isCollapse;
  58. },
  59. handleOpen(key, keyPath) {
  60. console.log(key, keyPath);
  61. },
  62. handleClose(key, keyPath) {
  63. console.log(key, keyPath);
  64. },
  65. },
  66. };
  67. </script>
  68. <style scoped>
  69. // 如果有样式调整,可以在这里添加
  70. .el-menu-vertical-demo:not(.el-menu--collapse) {
  71. width: 200px;
  72. }
  73. </style>

修改说明:

  • 使用了 <button> 元素和条件渲染来实现点击图标切换功能。
  • toggleCollapse 方法用于切换 isCollapse 的值,从而控制菜单的展开与收起状态。

这样就可以通过点击图标来实现菜单的展开和收起功能。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=19563

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?