Vue3 菜单栏缩放icon图标点击切换的方法

   <el-container class="contain-body">

        <el-header>

          <div class="icon-menu">

//将需要点击的两个图标复制设置点击事件判断isCollapse并用v-if判断

          <el-icon v-if="isCollapse" :size="30" @click="handleCollapse" ><Expand /></el-icon>

          <el-icon v-else :size="30" @click="handleCollapse" ><Fold /></el-icon>

        </div>

          头部

        </el-header>

        <el-main>Main</el-main>

      </el-container>

<script lang="ts" setup>

import { ref } from 'vue'

const isCollapse = ref(true)

const asiderwidth = {

  data() {

    return {

      asiderwidth:"200px"

    };

  },

}

const handleCollapse = () => {

  isCollapse.value=!isCollapse.value

}

</script>