Vue3后台管理系统（十七）布局切换组件

青旅半醒 2024-03-26 13:44 83阅读 0赞

**目录**

一、场景效果

二、图标

三、组件封装

四、使用案例

--------------------

#### 一、场景效果 ####

![3c566467352b49c6a303fc08b4fa8a70.png][]

#### 二、图标 ####

**将图标放到src/assets/icons文件夹中**

![c0f1d55d8454483fac9fdc342ccef48a.png][]![b1fdf93140854a259136fa57875a440f.png][]

#### 三、组件封装 ####

在src/components文件夹下新建SizeSelect文件夹，并在SizeSelect文件夹下新建index.vue

<script setup lang="ts">
    import { ref } from 'vue';
    import { ElMessage } from 'element-plus';
    
    import { useAppStore } from '@/store/modules/app';
    import SvgIcon from '@/components/SvgIcon/index.vue';
    
    const appStore = useAppStore();
    
    const sizeOptions = ref([
      { label: '默认', value: 'default' },
      { label: '大型', value: 'large' },
      { label: '小型', value: 'small' }
    ]);
    
    function handleSizeChange(size: string) {
      appStore.changeSize(size);
      ElMessage.success('切换布局大小成功');
    }
    </script>
    
    <template>
      <el-dropdown trigger="click" @command="handleSizeChange">
        <div class="cursor-pointerw-[40px] h-[50px] leading-[50px] text-center">
          <svg-icon icon-class="size" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              v-for="item of sizeOptions"
              :key="item.value"
              :disabled="appStore.size == item.value"
              :command="item.value"
            >
              {
       { item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>

#### 四、使用案例 ####

<script setup lang="ts">
    import SizeSelect from '@/components/SizeSelect/index.vue'
    </script>
    
    <template>
      <div>
        <size-select></size-select>
      </div>
    </template>
    
    <style>
    
    </style>

![b8114a3cbb7b4a93a53d077cc4ba7051.png][]

[3c566467352b49c6a303fc08b4fa8a70.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f45dd30500184bfda8a855d46521c45c.png
[c0f1d55d8454483fac9fdc342ccef48a.png]: https://img-blog.csdnimg.cn/c0f1d55d8454483fac9fdc342ccef48a.png
[b1fdf93140854a259136fa57875a440f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/020dfce4670741028e0d532878e97c2f.png
[b8114a3cbb7b4a93a53d077cc4ba7051.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c8844b46474e43cc8d7b35c739740e81.png

发表评论取消回复

表情：

评论列表（有 0 条评论，83人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3后台管理系统（十八）分页组件

目录一、场景效果二、滑动工具类三、组件封装四、全局注册五、使用案例 -------------------- 一、场景效果 ![3f262ec3e

叁歲伎倆/ 2024年03月26日 14:03/ 0 赞/ 87 阅读

相关 Vue3后台管理系统（十七）布局切换组件

目录一、场景效果二、图标三、组件封装四、使用案例 -------------------- 一、场景效果 ![3c566467352b49c6a303

青旅半醒/ 2024年03月26日 13:44/ 0 赞/ 84 阅读

相关 Vue3后台管理系统（十六）图标选择器

目录一、场景效果二、添加图标三、封装组件四、使用案例 -------------------- 一、场景效果 ![4f3f4c43d82149aba8

以你之姓@/ 2024年03月26日 13:44/ 0 赞/ 76 阅读

相关 Vue3后台管理系统（十四）GithubCorner组件

目录一、效果二、组件三、使用案例 -------------------- 一、效果 ![9aa3e2ccb2ef46d7b84b34f2a00ea68a

素颜马尾好姑娘i/ 2024年03月26日 13:42/ 0 赞/ 71 阅读

相关 Vue3后台管理系统（十三）全屏组件

目录一、两个图标：全屏fullscreen.svg、退出全屏exit-fullscreen.svg 二、组件封装三、使用案例 -------------------

雨点打透心脏的1/2处/ 2024年03月26日 13:41/ 0 赞/ 55 阅读

相关 Vue3后台管理系统（十九）路由vue-router

前言：这一章非常重要，首先我们要思考，路由涉及到了哪些东西？ ①它要生成URL地址与vue组件的路由关系，②它要根据当前用户的角色与菜单来决定要生成哪些地址路由。③它要把静态路

骑猪看日落/ 2024年03月26日 12:00/ 0 赞/ 64 阅读

相关 Vue3后台管理系统（十二）Echarts图表

目录一、安装 Echarts 二、Echarts 自适应大小工具类三、使用案例 -------------------- 一、安装 Echarts

今天药忘吃喽~/ 2024年03月26日 04:08/ 0 赞/ 82 阅读

相关 vue后台管理系统的布局

首先新建一个vue项目，然后安装element-ui组件，vuex状态管理等需要用到的。项目建立好能运行之后，在src/commponents文件夹下新建一个layout文

迷南。/ 2023年01月11日 01:23/ 0 赞/ 185 阅读

相关 vue后台管理系统切换页面动画

<transition name="fade-transform" mode="out-in"> <router-view></router-view

绝地灬酷狼/ 2021年07月26日 11:17/ 0 赞/ 685 阅读

相关 vue后台管理系统布局模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

本是古典何须时尚/ 2021年07月25日 20:55/ 0 赞/ 874 阅读