Arco design pro vue - 全局组件大小控制

原来的框架里没有这个组件尺寸大小控制的，给加上了一个，

官方文档也有讲配置的，但文档内容写的很少。
我是传送门，点我

首先是在 store > modules > app 中可以看到，他的app整个config配置来自defaultSettings

这儿给加上一个 size 默认给了个 small， 可取值有 ‘mini’ | ‘small’ | ‘medium’ | ‘large’。
我没有使用large。 小、中、大就用的 ‘mini’ | ‘small’ | ‘medium’

再到App.vue 文件中， 里面可以看到原有的国际化配置，这儿再添加上size配置，并引入store里的size，使用计算属性返回。

<template>
  <a-config-provider :locale="locale" :size="size">
    <router-view />
    <global-setting />
  </a-config-provider>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
  import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
  import GlobalSetting from '@/components/global-setting/index.vue';
  import useLocale from '@/hooks/locale';
  import { useAppStore } from '@/store';

  const { currentLocale } = useLocale();
  const locale = computed(() => {
    switch (currentLocale.value) {
      case 'zh-CN':
        return zhCN;
      case 'en-US':
        return enUS;
      default:
        return enUS;
    }
  });

  const size = computed(() => {
    const userCofig = useAppStore();
    return userCofig.size;
  });
</script>

接着在 components > navbar 这里的头部导航栏，在列表里加上一个

// tempalte
      <li>
        <a-tooltip :content="$t('settings.size')">
          <a-button
            class="nav-btn"
            type="outline"
            :shape="'circle'"
            @click="setDropDownVisiblebySize"
          >
            <template #icon>
              <icon-line-height />
            </template>
          </a-button>
        </a-tooltip>
        <a-dropdown trigger="click" @select="changeSize">
          <div ref="triggerBtnBySize" class="trigger-btn"></div>
          <template #content>
            <a-doption
              v-for="item in sizes"
              :key="item.value"
              :value="item.value"
            >
              {{ item.label }}
            </a-doption>
          </template>
        </a-dropdown>
      </li>

// hooks
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';
import { setUserSize } from '@/utils/auth';
import { useAppStore } from '@/store';

export default function useSize() {
  const i18 = useI18n();
  const appStore = useAppStore();
  const currentSize = computed(() => {
    return localStorage.getItem('user-size');
  });
  const changeSize = (value: string) => {
    setUserSize(value);
    appStore.size = value;
    Message.success(i18.t('navbar.action.size'));
  };
  return {
    currentSize,
    changeSize,
  };
}

//script
  import useSize from '@/hooks/size';
  const setDropDownVisiblebySize = () => {
    const event = new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true,
    });
    triggerBtnBySize.value.dispatchEvent(event);
  };
  const { changeSize } = useSize();

完毕之后，选择修改可以看到按钮会随着我们的选择尺寸动态修改，但是table好像没有生效，没找到是什么原因，知道的同学可以告知一下，这里我就直接动态赋值了，也可以实现。

// template
       <a-table
            :columns="columns"
            :data="userTableData"
            column-resizable
            :hoverable="false"
            :scroll="scrollPercent"
            :loading="loading"
            row-key="id"
            :bordered="{ cell: true }"
            :size="size" // 动态尺寸
            :pagination="PaginationProps"
            :row-class="activeRowClass"
            @page-change="changeTablePageClick"
            @row-click="handelClickTableRow"
          >
        
 // script
   import { useAppStore } from '@/store';
   const size = computed(() => {
    const userCofig = useAppStore();
    return userCofig.size;
  });