Vue3 + element plus 动态修改组件尺寸大小

前言

最近在使用vue3+element plus 练手，于是想参照网上element-ui demo 实现一个动态修改组件尺寸的功能，在次将功能实现方式记录于此

项目准备

搭建vue3 项目 + 引入element plus（这里就不多阐述）

功能实现

主要步骤如下：

• • 修改size的下拉实现
  • 点击回调，实现size的修改
  • 利用 $nextTick 实现 重定向刷新页面

修改size的下拉

<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <svg-icon style="color: #FFFFFF;" class-name="size-icon" icon-class="size" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="(item,index) of sizeOptions" :key="index" :disabled="curSize==item.value"
          :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang="ts">
  import { defineComponent, getCurrentInstance, ref } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute, useRouter } from 'vue-router'
  export default defineComponent({
    name: 'SizeSelect',
    setup(props) {
      const instance = (getCurrentInstance() as ComponentInternalInstance)
      var _this = instance.ctx;
      const store = useStore();
      const route = useRoute();
      const router = useRouter();

      var curSize = ref(store.state.size);
      const sizeOptions = [
        { label: 'Default', value: 'default' },
        { label: 'Medium', value: 'medium' },
        { label: 'Small', value: 'small' },
        { label: 'Mini', value: 'mini' }
      ]
            
      const handleSetSize = (size) => {
        curSize.value = size;
        store.commit('SET_SIZE', size);
        console.log(store, instance);
        instance.appContext.app.config.globalProperties.$ELEMENT.size = size;
        refreshView();
      }

      const refreshView = () => {
        // In order to make the cached page re-rendered
        store.dispatch('delAllCachedViews', route)
        const { fullPath } = route;
        _this.$nextTick(() => {
          router.replace({
            path: '/redirect' + fullPath
          })
        })
      }
      return {
        sizeOptions,
        handleSetSize,
        curSize
      }
    }
  })
</script>

main.ts/main.js配置

const option = {
  size: Cookies.get('size') || 'mini',
};
app.config.globalProperties.$ELEMENT = option
components.forEach(component => {
  app.component(component.name, component);
})

store 配置

import { createStore } from 'vuex'
import tagsView from './modules/tagsView'
import Cookies from 'js-cookie'
export default createStore({
   modules: {
      tagsView
   },
   state: {
      size: Cookies.get('size') || 'mini',
      language: Cookies.get('language') || 'en',
      themeColor: Cookies.get('themeColor') || '#409EFF'
   },
   mutations: {
      SET_SIZE: (state, size) => {
         state.size = size
         Cookies.set('size', size)
      },
      SET_LANGUAGE: (state, language) => {
         state.language = language
         Cookies.set('language', language)
      },
      SET_THEME_COLOR: (state, themeColor) => {
         state.themeColor = themeColor
         Cookies.set('themeColor', themeColor)
      }
   },
   actions: {
      setSize({ commit }, size) {
         commit('SET_SIZE', size)
      },
      setLanguage({ commit }, language) {
         commit('SET_LANGUAGE', language)
      },
      setThemeColor({ commit }, themeColor) {
         commit('SET_THEME_COLOR', themeColor)
      }
   }
})

路由配置

router.ts/router.js

import Redirect from '@/views/redirect/index.vue'
{
  path: '/redirect',
  redirect: '/',
  component: Layout,
  children: [
    {
    path: '/redirect/:path*',
    component: Redirect
    }
  ]
},

redirect目录下的index.vue

<script>
  import { h } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  export default {

    setup(props) {
      const route = useRoute();
      const router = useRouter();
      const { params, query } = route;
      const { path } = params;
      router.replace({
        path: '/' + path, query
      })
    },
    render() {
      return h() // avoid warning message
    }
  }
</script>

实现效果如下