element-plus收起左侧菜单功能

猴猴不是猴

已于 2024-04-01 10:12:54 修改

阅读量292

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

于 2023-07-20 16:19:11 首次发布

本文链接：https://blog.csdn.net/weixin_56381842/article/details/131833448

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

 <div class="toggle-button" @click="isCollapse = !isCollapse" style="display: flex; align-items: center;width:9rem" >
                  <el-icon :size="20">
                    <Expand v-if="isCollapse" />
                    <Fold v-if="!isCollapse" />
                  </el-icon>
                  <p v-if="!isCollapse" style="margin-left: 5px;font-size: 8px; cursor: pointer;">左侧收起菜单</p>
                  <p v-if="isCollapse" style="margin-left: 5px; font-size: 8px ; cursor: pointer;">右侧展开菜单</p>
                </div>

@click="isCollapse = !isCollapse" //必须写

//切换图标和文字
  <Expand v-if="isCollapse" />
  <Fold v-if="!isCollapse" />
 <p v-if="!isCollapse" style="margin-left: 5px;font-size: 8px; cursor: pointer;">
    左侧收起菜单</p>
  <p v-if="isCollapse" style="margin-left: 5px; font-size: 8px ; cursor: pointer;">
右侧展开菜单</p>

效果是酱婶的