参考资料：
Element Plus最新图标引入以及使用方法，icon动态组件，点击切换图标_@element-plus/icons-vue
vue3 elementplus el-Icon 动态渲染 点击切换icon图标组件_vue3怎样实现点击切换图标?
这里要利用动态组件进行切换，使用一个component组件，之前用ELEMENT-UI想要实现动态切换的写法：这是之前的写法
由于ELEMENTPLUS不能通过改变类名的方式修改icon，这里如何切换呢？
把原先icon的图标用component进行替换
这里的最终解决方案是：利用v-show方法显示和隐藏解决的，先用click绑定一个方法，:is绑定你想要显示icon的内容,然后用v-if 和v-else
<el-icon @click="handleCollapse"> <component :is="Fold" v-if="isCollapse"></component> <component :is="Expand" v-else></component> </el-icon>
Script中一定要引入你的icon才可以
<script setup> import { House, Menu, Fold } from '@element-plus/icons-vue' </script>
定义一个isCollapse判断显不显示，this顺序很重要，有时候点了一下没反应，按照下面的顺序
<script setup> import { House, Menu, Fold, Expand, ArrowRight} from "@element-plus/icons-vue"; </script> <script> export default { name: "HomeView", data() { return { isCollapse: false, asideWidth: "200px", flag:true }; }, methods: { handleCollapse() { this.isCollapse = !this.isCollapse; this.asideWidth = this.isCollapse ? "64px" : "200px"; }, }, }; </script>
这样就是实现切换了，用了component
附赠源码：
<template> <div> <el-container> <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529" > <div style=" height: 60px; color: white; display: flex; align-items: center; justify-content: center; " > <!-- <img src="@/assets/logo.png" style="width: 60px;height: 10px;"> <span class="logo-title" v-show="!isCollapse">零一</span> --> </div> <el-menu :collapse="isCollapse" style="border: none" background-color="#001529" text-color="rgba(255,255,255,0.65)" default-active="$router.path" > <el-menu-item index="/"> <el-icon> <House /> </el-icon> <span>系统首页</span> </el-menu-item> <el-menu-item> <template #title> <el-icon> <House /> </el-icon> <span>系统首页</span> </template> </el-menu-item> <el-menu-item> <template #title> <el-icon> <House /> </el-icon> <span>系统首页</span> </template> </el-menu-item> <el-sub-menu index="1-4"> <template #title> <el-icon> <Menu /> </el-icon> <span>信息管理</span> </template> <el-menu-item index="1-4-1">用户信息</el-menu-item> </el-sub-menu> </el-menu> </el-aside> <el-container> <el-header> <el-icon @click="handleCollapse"> <component :is="Expand" v-if="isCollapse"></component> <component :is="Fold" v-else></component> </el-icon> <el-breadcrumb :separator-icon="ArrowRight" style="margin-left:20px"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">用户管理</el-breadcrumb-item> </el-breadcrumb> </el-header> <el-main> </el-main> </el-container> </el-container> </div> </template> <style scoped> .el-menu--inline { background-color: #000c17 !important; } .el-menu--inline .el-menu-item { background-color: #000c17 !important; } .el-menu-item:hover, .el-sub-menu__title:hover span { color: #fff !important; } .el-sub-menu__title:hover i { color: #fff !important; } .el-menu-item.is-active { background-color: #40a9ff !important; color: #fff; border-radius: 5px !important; margin: 4px !important; width: calc(100% -8px); margin-left: 4px; } .el-menu-item.is-active i, .el-menu-item.el-menu-item.is-active .el-tooltip { margin-left: -4px; } .el-menu-item { height: 40px !important; line-height: 40px !important; margin: 4px !important; } .el-submenu__title { height: 40px !important; line-height: 40px !important; margin: 4px !important; } .el-aside { transition: width .3s; box-shadow: 2px 0 6px rgba(0,21,41,.35); } .el-header { box-shadow: 2px 0 6px rgba(0,21,41,.35); display: flex; align-items: center; } .el-aside div .img { width: 30px; } .el-aside div span { font-size: 14px; font-family: "Times New Roman", Times, serif; font-weight: 700; } .logo-title { margin-left: 5px; font-size: 20px; transition: all 0.3s; } </style> <script setup> import { House, Menu, Fold, Expand, ArrowRight} from "@element-plus/icons-vue"; </script> <script> export default { name: "HomeView", data() { return { isCollapse: false, asideWidth: "200px", flag:true }; }, methods: { handleCollapse() { this.isCollapse = !this.isCollapse; this.asideWidth = this.isCollapse ? "64px" : "200px"; }, }, }; </script>
最后效果：
