ZBLOG

要实现点击图标来控制展开和收起的功能,可以将原来的 el-radio-group 替换为两个图标按钮(分别是“折叠”和“展开”)。以下是完整代码,已进行相应修改:

  1. <template>
  2. <el-container style="height: 500px; border: 1px solid #eee">
  3. <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
  4. :collapse="isCollapse">
  5. <el-submenu index="1">
  6. <template slot="title">
  7. <i class="el-icon-location"></i>
  8. <span slot="title">导航一</span>
  9. </template>
  10. <el-menu-item-group>
  11. <span slot="title">分组一</span>
  12. <el-menu-item index="1-1">选项1</el-menu-item>
  13. <el-menu-item index="1-2">选项2</el-menu-item>
  14. </el-menu-item-group>
  15. <el-menu-item-group title="分组2">
  16. <el-menu-item index="1-3">选项3</el-menu-item>
  17. </el-menu-item-group>
  18. <el-submenu index="1-4">
  19. <span slot="title">选项4</span>
  20. <el-menu-item index="1-4-1">选项1</el-menu-item>
  21. </el-submenu>
  22. </el-submenu>
  23. <el-menu-item index="2">
  24. <i class="el-icon-menu"></i>
  25. <span slot="title">导航二</span>
  26. </el-menu-item>
  27. <el-menu-item index="3" disabled>
  28. <i class="el-icon-document"></i>
  29. <span slot="title">导航三</span>
  30. </el-menu-item>
  31. <el-menu-item index="4">
  32. <i class=" el-icon-setting"></i>
  33. <span slot="title">导航四</span>
  34. </el-menu-item>
  35. </ el - menu >
  36. <
  37. el - container >
  38. <
  39. el - header style = "text-align: right; font-size: 12px" >
  40. <
  41. span style = "float:left;margin-top:10px;" >
  42. <!-- 点击图标实现展开/收起功能 -->
  43. <!-- 添加折叠图标 -->
  44. < el - icon v - if = "!isCollapse" @click = "toggleCollapse" >
  45. <!-- 使用适当的 Fold 图标组件 -->
  46. <!-- 假设这是你导入的折叠图标组件 -->
  47. Fold
  48. </ el - icon >
  49. <!-- 添加展开图标 -->
  50. <
  51. el - icon v - if = "isCollapse" @click = "toggleCollapse" >
  52. <!-- 使用适当的 Expand 图标组件 -->
  53. <!-- 假设这是你导入的展开图标组件 -->
  54. Expand
  55. </ el - icon >
  56. <
  57. / span >
  58. <
  59. el - dropdown >
  60. <
  61. i class = " el-icon-setting " style = "margin-right: 15px" >
  62. <
  63. / i >
  64. <
  65. el-dropdown-menu slot = "dropdown" >
  66. <
  67. el-dropdown-item > 查看 <
  68. / el-dropdown-item >
  69. <
  70. el-dropdown-item > 新增 <
  71. / el-dropdown-item >
  72. <
  73. el-dropdown-item > 删除 <
  74. / el-dropdown-item >
  75. <
  76. / el-dropdown-me nu >
  77. <
  78. / el-dropdown >
  79. <
  80. span > 王小虎 </ span >
  81. < /
  82. el-header >
  83. < /
  84. template >
  85. < style >
  86. .el_menu_vertical_demo:not(.ele_menu--collapse) {
  87. width: 200px;
  88. min-height: 400px;
  89. }
  90. .el-header {
  91. background-color: #B3C0D1;
  92. color: #333;
  93. line-height: 60px;
  94. }
  95. .el-aside {
  96. color: #333;
  97. }
  98. <
  99. /style>
  100. <script>
  101. export default {
  102. name: 'layoutPage',
  103. data() {
  104. const item = {
  105. date: '2016-05-02',
  106. name: '王小虎',
  107. address: '上海市普陀区金沙江路1518弄'
  108. };
  109. return {
  110. tableData: Array(20).fill(item),
  111. isCollapse: true // 初始状态为收起
  112. }
  113. },
  114. methods:{
  115. toggleCollapse(){
  116. this.isCollapse= !this.isCollapse; // 切换状态
  117. },
  118. handleOpen(key, keyPath) {
  119. console.log(key, keyPath);
  120. },
  121. handleClose(key, keyPath) {
  122. console.log(key, keyPath);
  123. }
  124. }
  125. };
  126. < /
  127. script >

修改说明:

  1. 添加了切换功能:在 <template> 中用 <El-icon> 来替代 radio-button,并且根据当前的 isCollapse 状态显示不同的图标(假定已经导入了相应的 FoldExpand 图标)。
  2. 定义了切换方法:通过 toggleCollapse 方法来切换菜单状态。
  3. 保持其他功能不变,确保整体结构和样式一致。

请确保您已经引入了需要使用的图标组件,并根据需要调整其具体实现。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?