ZBLOG

要将“展开”和“收起”功能替换为点击图标(<el-icon><Fold /></el-icon><el-icon><Expand /></el-icon>),您需要对现有的代码进行一些小的修改。具体步骤如下:

  1. 导入所需的图标组件。
  2. 将原有的<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></li>
  34. </elmenuitem >
  35. </elm menu >
  36. <!-- 控制图标 -->
  37. <!-- 改成点击图标来实现展开和收起 -->
  38. <
  39. el container >
  40. <
  41. el header style = "text-align: right; font-size: 12px" >
  42. <
  43. span style = "float: left; margin-top: 10px; cursor: pointer;" @click = "change" >
  44. <
  45. el - icon v-if = "!isCollapse" > <
  46. Fold / > <
  47. / el - icon > <
  48. el - icon v-if = "isCollapse" > <
  49. Expand / > <
  50. / el - icon >
  51. </ span >
  52. <!-- 下拉菜单和用户名显示 -->
  53. ...
  54. <
  55. / el header >
  56. <
  57. el main >
  58. ...
  59. <
  60. / el main >
  61. </
  62. el container >
  63. </
  64. el container >
  65. </>
  66. );
  67. <style scoped>
  68. .el menu vertical demo:not(.El menu--collapse) {
  69. width: 200px;
  70. min-height: 400px;
  71. }
  72. .el header {
  73. background-color: #B3C0D1;
  74. color: #333;
  75. line-height: 60px;
  76. }
  77. .el aside {
  78. color: #333;
  79. }
  80. </style>
  81. <script>
  82. export default {
  83. name: 'layoutPage',
  84. data() {
  85. const item = { date:'2016-05-02', name:'王小虎', address:'上海市普陀区金沙江路1518弄' };
  86. return { tableData:Array(20).fill(item), isCollapse:true } } ,
  87. methods:{ change() { this.isCollapse=!this.isCollapse }, handleOpen(key,keyPath){ console.log(key,keyPath); }, handleClose(key,keyPath){ console.log(key,keyPath); }}
  88. };
  89. </script>

在这个示例中,已将<ul radio group>替换为使用图标(折叠和展开)来切换侧边栏的状态。点击这些图标会调用 change() 方法,切换 isCollapse 的值,从而实现展开和收起功能。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?