Element Plus如何动态切换icon

参考资料：

Element Plus最新图标引入以及使用方法，icon动态组件，点击切换图标_@element-plus/icons-vue-CSDN博客

vue3 elementplus el-Icon 动态渲染 点击切换icon图标组件_vue3怎样实现点击切换图标?-CSDN博客

这里要利用动态组件进行切换，使用一个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>

最后效果：