对于element组件size属性尺寸共有 default medium small mini这四种

效果图
image.png
image.png

2-1 创建sizeSelect组件

切换element size主要通过动态修改$ELEMENT.size 为default | medium | small | mini

我们已经挂载到 vue组件实例上 可通过组件实例直接修改

  1.   // 全局配置 https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  2.   // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  3.   app.config.globalProperties.$ELEMENT = {
  4.     size: options.size
  5.   }

导入相关elemment 组件

src/plugins/element.ts
image.png

创建sizeSelect组件

src/components/SizeSelect/index.vue

  1. <template>
  2.   <div>
  3.     <el-dropdown trigger="click" @command="handleSize">
  4.       <div>
  5.         <svg-icon class-name="size-icon" icon-class="size"></svg-icon>
  6.       </div>
  7.       <template #dropdown>
  8.         <el-dropdown-menu>
  9.           <el-dropdown-item
  10.             v-for="item in sizeOptions"
  11.             :key="item.value"
  12.             :command="item.value"
  13.             :disabled="item.value === size"
  14.           >
  15.             {{ item.label }}
  16.           </el-dropdown-item>
  17.         </el-dropdown-menu>
  18.       </template>
  19.     </el-dropdown>
  20.   </div>
  21. </template>
  23. <script lang="ts">
  24. import { Size } from '@/plugins/element'
  25. import {
  26.   defineComponent,
  27.   ref,
  28.   getCurrentInstance,
  29.   ComponentInternalInstance,
  30.   ComponentPublicInstance,
  31.   computed,
  32.   nextTick
  33. } from 'vue'
  34. import { useRoute, useRouter } from 'vue-router'
  35. import { useStore } from '@/store'
  37. export default defineComponent({
  38.   name: 'SizeSelect',
  39.   setup() {
  40.     const store = useStore()
  41.     const route = useRoute()
  42.     const router = useRouter()
  43.     const { proxy } = getCurrentInstance() as ComponentInternalInstance
  44.     // store中获取size 这里需要注意通过computed获取store状态 确保获取到正确更新
  45.     const size = computed(() => store.getters.size)
  46.     // element size 选项
  47.     const sizeOptions = ref([
  48.       { label: 'Default', value: 'default' },
  49.       { label: 'Medium', value: 'medium' },
  50.       { label: 'Small', value: 'small' },
  51.       { label: 'Mini', value: 'mini' }
  52.     ])
  54.     // 刷新当前路由
  55.     const refreshView = () => {
  56.       const { fullPath } = route
  57.       nextTick(() => {
  58.         // 重定向到中间页 实现vue中当前路由刷新
  59.         router.replace({
  60.           path: '/redirect' + fullPath
  61.         })
  62.       })
  63.     }
  65.     // command 获取点击按钮的command属性值 作为size值
  66.     const handleSize = (command: Size) => {
  67.       // 修改element-plus组件尺寸
  68.       (proxy as ComponentPublicInstance).$ELEMENT.size = command
  69.       // 更新store
  70.       store.dispatch('app/setSize', command)
  71.       // 切换size需要刷新路由才能生效
  72.       refreshView()
  73.       proxy?.$message.success({
  74.         type: 'success',
  75.         message: 'Switch Size Success'
  76.       })
  77.     }
  79.     return {
  80.       sizeOptions,
  81.       size,
  82.       handleSize
  83.     }
  84.   }
  85. })
  86. </script>
  88. <style lang="scss">
  89.   .size-icon {
  90.     font-size: 18px;
  91.   }
  92. </style>

navbar导入组件并调整样式

image.png
navbar样式调整
image.png
src/layout/components/Navbar.vue

  1. <template>
  2.   <div class="navbar">
  3.     <hambuger  @toggleClick="toggleSidebar" :is-active="sidebar.opened"/>
  4.     <breadcrumb />
  5.     <div class="right-menu">
  6.       <!-- 全屏 -->
  7.       <screenfull id="screefull" class="right-menu-item hover-effect" />
  8.       <!-- element组件size切换 -->
  9.       <el-tooltip content="Global Size" effect="dark" placement="bottom">
  10.         <size-select class="right-menu-item hover-effect" />
  11.       </el-tooltip>
  12.     </div>
  13.   </div>
  14. </template>
  16. <script lang="ts">
  17. import { defineComponent, computed } from 'vue'
  18. import Breadcrumb from '@/components/Breadcrumb/index.vue'
  19. import Hambuger from '@/components/Hambuger/index.vue'
  20. import { useStore } from '@/store/index'
  21. import Screenfull from '@/components/Screenfull/index.vue'
  22. import SizeSelect from '@/components/SizeSelect/index.vue'
  24. export default defineComponent({
  25.   name: 'Navbar',
  26.   components: {
  27.     Breadcrumb,
  28.     Hambuger,
  29.     Screenfull,
  30.     SizeSelect
  31.   },
  32.   setup() {
  33.     // 使用我们自定义的useStore 具备类型提示
  34.     // store.state.app.sidebar 对于getters里的属性没有类型提示
  35.     const store = useStore()
  36.     const toggleSidebar = () => {
  37.       store.dispatch('app/toggleSidebar')
  38.     }
  39.     // 从getters中获取sidebar
  40.     const sidebar = computed(() => store.getters.sidebar)
  42.     return {
  43.       toggleSidebar,
  44.       sidebar
  45.     }
  46.   }
  47. })
  48. </script>
  50. <style lang="scss">
  51.   .navbar {
  52.     display: flex;
  53.     .right-menu {
  54.       flex: 1;
  55.       display: flex;
  56.       align-items: center;
  57.       justify-content: flex-end;
  58.       padding-right: 15px;
  59.       &-item {
  60.         padding: 0 8px;
  61.         font-size: 18px;
  62.         color: #5a5e66;
  63.         vertical-align: text-bottom;
  64.         &.hover-effect {
  65.           cursor: pointer;
  66.           transition: background .3s;
  68.           &:hover {
  69.             background: rgba(0, 0, 0, .025);
  70.           }
  71.         }
  72.       }
  73.     }
  74.   }
  75. </style>

当每次切换size时，不仅需要修改$ELEMENT.size 还要让当前路由刷新才能生效。

2-2 size属性添加到store

修改src/store/modules/app.ts

添加 state size、actions setSize、mutations SET_SIZE

  1. import { Size } from '@/plugins/element'
  2. import { ActionTree, Module, MutationTree } from 'vuex'
  3. import { IRootState } from '../index'
  5. // 定义app里state类型
  6. export interface IAppState {
  7.   sidebar: {
  8.     opened: boolean
  9.   },
  10.   size: Size
  11. }
  13. // 定义mutations
  14. const mutations: MutationTree<IAppState> = {
  15.   TOGGLE_SIDEBAR(state) {
  16.     state.sidebar.opened = !state.sidebar.opened
  17.   },
  18.   SET_SIZE(state, size: Size) {
  19.     state.size = size
  20.   }
  21. }
  23. // 定义actions
  24. const actions: ActionTree<IAppState, IRootState> = {
  25.   toggleSidebar({ commit }) {
  26.     commit('TOGGLE_SIDEBAR')
  27.   },
  28.   setSize({ commit }, size: Size) {
  29.     commit('SET_SIZE', size)
  30.   }
  31. }
  33. // 定义module
  34. const app: Module<IAppState, IRootState> = {
  35.   namespaced: true,
  36.   state: {
  37.     sidebar: {
  38.       opened: true
  39.     },
  40.     size: 'medium'
  41.   },
  42.   mutations,
  43.   actions
  44. }
  46. export default app

sotre缓存中将size缓存

修改src/store/index.ts
image.png

getters中添加size

image.png

2-3 实现当前路由刷新

解决一下两点问题
- vue中通过一个重定向中间页实现当前路由刷新 利用路由router.replace
- 实现当前路由刷新 路由不能被keep-alive缓存 目前我们是默认全部缓存

添加redirect路由

创建redirect 路由组件
src/views/redirect/index.vue

  1. <script lang="ts">
  2. import { h } from 'vue'
  3. import { useRoute, useRouter } from 'vue-router'
  5. export default {
  6.   name: 'Redirect',
  7.   setup() {
  8.     const route = useRoute()
  9.     const router = useRouter()
  10.     const { query, params } = route
  11.     router.replace({
  12.       path: '/' + params.path,
  13.       query
  14.     })
  15.     return () => {
  16.       return h('template')
  17.     }
  18.   }
  19. }
  20. </script>

注册路由

src/router/index.ts
image.png

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2. import Layout from '@/layout/index.vue'
  4. // 看作是异步获取路由
  5. export const asyncRoutes: Array<RouteRecordRaw> = [
  6.   {
  7.     path: '/documentation',
  8.     component: Layout, // 布局组件作为一级路由
  9.     redirect: '/documentation/index',
  10.     children: [
  11.       {
  12.         path: 'index',
  13.         name: 'Documentation',
  14.         component: () => import(/* webpackChunkName: "documentation" */ '@/views/documentation/index.vue'),
  15.         meta: {
  16.           title: 'Documentation',
  17.           icon: 'documentation',
  18.           hidden: false // 菜单栏不显示
  19.         }
  20.       }
  21.     ]
  22.   },
  23.   {
  24.     path: '/guide',
  25.     component: Layout,
  26.     redirect: '/guide/index',
  27.     children: [
  28.       {
  29.         path: 'index',
  30.         name: 'Guide',
  31.         component: () => import(/* webpackChunkName: "guide" */ '@/views/guide/index.vue'),
  32.         meta: {
  33.           title: 'Guide',
  34.           icon: 'guide'
  35.           // 当guide路由激活时高亮选中的是 documentation/index菜单
  36.           // activeMenu: '/documentation/index'
  37.         }
  38.       }
  39.     ]
  40.   },
  41.   {
  42.     path: '/system',
  43.     component: Layout,
  44.     redirect: '/system/user',
  45.     meta: {
  46.       title: 'System',
  47.       icon: 'lock',
  48.       alwaysShow: true // 根路由始终显示 哪怕只有一个子路由
  49.     },
  50.     children: [
  51.       {
  52.         path: 'menu',
  53.         component: () => import(/* webpackChunkName: "menu" */ '@/views/system/menu.vue'),
  54.         meta: {
  55.           title: 'Menu Management',
  56.           hidden: false,
  57.           breadcrumb: false
  58.         }
  59.       },
  60.       {
  61.         path: 'role',
  62.         component: () => import(/* webpackChunkName: "role" */ '@/views/system/role.vue'),
  63.         meta: {
  64.           title: 'Role Management',
  65.           hidden: false
  66.         }
  67.       },
  68.       {
  69.         path: 'user',
  70.         component: () => import(/* webpackChunkName: "user" */ '@/views/system/user.vue'),
  71.         meta: {
  72.           title: 'User Management'
  73.         }
  74.       }
  75.     ]
  76.   },
  77.   { // 外链路由
  78.     path: '/external-link',
  79.     component: Layout,
  80.     children: [
  81.       {
  82.         path: 'https://www.baidu.com/',
  83.         redirect: '/',
  84.         meta: {
  85.           title: 'External Link',
  86.           icon: 'link'
  87.         }
  88.       }
  89.     ]
  90.   },
  91.   { // 404一定放在要在最后面
  92.     path: '/:pathMatch(.*)*',
  93.     redirect: '/404',
  94.     meta: {
  95.       hidden: true
  96.     }
  97.   }
  98. ]
  100. export const constantRoutes: Array<RouteRecordRaw> = [
  101.   {
  102.     path: '/',
  103.     component: Layout,
  104.     redirect: '/dashboard',
  105.     children: [
  106.       {
  107.         path: 'dashboard',
  108.         name: 'Dashboard',
  109.         component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/index.vue'),
  110.         meta: {
  111.           title: 'Dashboard',
  112.           // icon: 'dashboard'
  113.           icon: 'el-icon-platform-eleme'
  114.         }
  115.       }
  116.     ]
  117.   },
  118.   {
  119.     path: '/redirect',
  120.     component: Layout,
  121.     meta: {
  122.       hidden: true
  123.     },
  124.     children: [
  125.       {  // 带参数的动态路由正则匹配 文档说明 
  126.         // https://next.router.vuejs.org/zh/guide/essentials/route-matching-syntax.html#%E5%8F%AF%E9%87%8D%E5%A4%8D%E7%9A%84%E5%8F%82%E6%95%B0
  127.         path: '/redirect/:path(.*)', // 要匹配多级路由 应该加*号
  128.         component: () => import('@/views/redirect/index.vue')
  129.       }
  130.     ]
  131.   },
  132.   {
  133.     path: '/401',
  134.     component: Layout,
  135.     children: [
  136.       {
  137.         path: '',
  138.         component: () => import('@/views/error-page/401.vue'),
  139.         meta: {
  140.           title: '401',
  141.           icon: '404',
  142.           hidden: true
  143.         }
  144.       }
  145.     ]
  146.   },
  147.   {
  148.     path: '/404',
  149.     component: () => import('@/views/error-page/404.vue'),
  150.     meta: {
  151.       hidden: true // 404 hidden掉
  152.     }
  153.   }
  154. ]
  156. export const routes = [
  157.   ...constantRoutes,
  158.   ...asyncRoutes
  159. ]
  161. const router = createRouter({
  162.   history: createWebHashHistory(),
  163.   routes
  164. })
  166. export default router

解决keep-alive缓存问题

暂时先给keep-alive添加 include属性为空数组

image.png
修改src/layout/components/AppMain.vue

  1. <template>
  2.   <div class="app-main">
  3.     <!-- vue3 路由缓存 https://next.router.vuejs.org/guide/migration/index.html#router-view-keep-alive-and-transition -->
  4.     <router-view v-slot={Component}>
  5.       <transition name="fade-transform" mode="out-in">
  6.         <keep-alive :include="cachedViews">
  7.           <component :is="Component" :key="key" />
  8.         </keep-alive>
  9.       </transition>
  10.     </router-view>
  11.   </div>
  12. </template>
  14. <script lang="ts">
  15. import { computed, defineComponent, ref } from 'vue'
  16. import { useRoute } from 'vue-router'
  18. export default defineComponent({
  19.   name: 'AppMain',
  20.   setup() {
  21.     const route = useRoute()
  22.     const key = computed(() => route.path)
  23.     // 缓存路由集合 暂时先是空数组 后面会放到store
  24.     const cachedViews = ref([])
  25.     return {
  26.       key,
  27.       cachedViews
  28.     }
  29.   }
  30. })
  31. </script>
  33. <style lang="scss" scoped>
  34. .app-main {
  35.   /* navbar 50px  */
  36.   min-height: calc(100vh - 50px);
  37. }
  39. .fade-transform-enter-active,
  40. .fade-transform-leave-active {
  41.   transition: all .5s;
  42. }
  44. .fade-transform-enter-from {
  45.   opacity: 0;
  46.   transform: translateX(-30px);
  47. }
  49. .fade-transform-leave-to {
  50.   opacity: 0;
  51.   transform: translateX(30px);
  52. }
  53. </style>

2-4 插件size统一从store里获取

利用vue plugin进行参数传递

image.png
修改src/main.ts

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store, { key } from './store'
  5. // 初始化css
  6. import 'normalize.css/normalize.css'
  7. // element-plus
  8. import installElementPlus, { Size } from './plugins/element'
  9. // 挂载到vue实例上
  10. import { ElMessageBox, ElMessage, ElNotification } from 'element-plus'
  11. // 全局 css
  12. import '@/styles/index.scss'
  13. // svg icons
  14. import initSvgIcon from '@/icons/index'
  16. const app = createApp(App)
  17. // 获取store里存储的size
  18. const size = store.state.app.size
  20. app
  21.   .use(store, key)
  22.   .use(router)
  23.   .use(installElementPlus, {
  24.     size
  25.   })
  26.   .use(initSvgIcon)
  27.   .mount('#app')
  29. /**
  30.  * 相关issue问题
  31.  * Why not on the d.ts use it ?
  32.    (为什么不能在shims-d.ts 中设置这个？
  33.  * https://github.com/vuejs/vue-next/pull/982
  34.  */
  35. // 挂载到vue实例上
  36. declare module '@vue/runtime-core' {
  37.   interface ComponentCustomProperties {
  38.     $message: typeof ElMessage;
  39.     $notify: typeof ElNotification;
  40.     $confirm: typeof ElMessageBox.confirm;
  41.     $alert: typeof ElMessageBox.alert;
  42.     $prompt: typeof ElMessageBox.prompt;
  43.     $ELEMENT: {
  44.       size: Size;
  45.     };
  46.   }
  47. }

修改element.ts接收plugin参数
image.png

  1. import { App } from 'vue'
  2. import {
  3.   locale,
  4.   ElButton,
  5.   ElMessage,
  6.   ElNotification,
  7.   ElMessageBox,
  8.   ElMenu,
  9.   ElMenuItem,
  10.   ElSubmenu,
  11.   ElRow,
  12.   ElCol,
  13.   ElBreadcrumb,
  14.   ElBreadcrumbItem,
  15.   ElTooltip,
  16.   ElDropdown,
  17.   ElDropdownMenu,
  18.   ElDropdownItem
  19. } from 'element-plus'
  20. import 'element-plus/lib/theme-chalk/index.css'
  21. // Element Plus 组件内部默认使用英语
  22. // https://element-plus.gitee.io/#/zh-CN/component/i18n
  23. import lang from 'element-plus/lib/locale/lang/zh-cn'
  24. // Element Plus 直接使用了 Day.js 项目的时间日期国际化设置, 并且会自动全局设置已经导入的 Day.js 国际化配置。
  25. import 'dayjs/locale/zh-cn'
  27. // $ELEMENT size属性类型
  28. export type Size = 'default' | 'medium' | 'small' | 'mini'
  30. interface ElementOptions {
  31.   size: Size
  32. }
  34. export default (app: App, options: ElementOptions): void => {
  35.   locale(lang)
  37.   // 按需导入组件列表
  38.   const components = [
  39.     ElButton,
  40.     ElMessage,
  41.     ElNotification,
  42.     ElMessageBox,
  43.     ElMenu,
  44.     ElMenuItem,
  45.     ElSubmenu,
  46.     ElRow,
  47.     ElCol,
  48.     ElBreadcrumb,
  49.     ElBreadcrumbItem,
  50.     ElTooltip,
  51.     ElDropdown,
  52.     ElDropdownMenu,
  53.     ElDropdownItem
  54.   ]
  56.   components.forEach(component => {
  57.     app.component(component.name, component)
  58.   })
  60.   // Vue.prototype 替换为 config.globalProperties
  61.   // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  62.   app.config.globalProperties.$message = ElMessage
  63.   app.config.globalProperties.$notify = ElNotification
  64.   app.config.globalProperties.$confirm = ElMessageBox.confirm
  65.   app.config.globalProperties.$alert = ElMessageBox.alert
  66.   app.config.globalProperties.$prompt = ElMessageBox.prompt
  68.   // 全局配置 https://element-plus.gitee.io/#/zh-CN/component/quickstart#quan-ju-pei-zhi
  69.   // 该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸 small，zIndex 设置弹框的初始 z-index（默认值：2000）。
  70.   app.config.globalProperties.$ELEMENT = {
  71.     size: options.size
  72.   }
  73. }

2-5 测试

dashboard页面导入button组件

src/views/dashboard/index.vue

  1. <template>
  2.   <div>
  3.     <h1>Dashboard page</h1>
  4.     缓存测试 <input type="text">
  5.     <el-button type="primary">size改变</el-button>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'Dashboard'
  12. }
  13. </script>
  15. <style lang="scss">
  16.   .custom-class { // 自定义样式404
  17.     font-size: 200px;
  18.     color: green;
  19.   }
  20. </style>

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/1c1d7cc4c41ea4fe0dc4cf61fed9efc5bfec9b36