Config Provider 全局配置

为组件提供统一的全局化配置。 Config Provider 使用了 Vue 的 provide/inject 特性。

组件注册

import { FConfigProvider } from '@fesjs/fes-design';

app.use(FConfigProvider);

组件使用

<template>
    <f-config-provider :getContainer="getContainer">
        <app />
    </f-config-provider>
</template>

<script setup>
const getContainer = () => {
    return document.body;
};
</script>

切换语言

play

<template>
    <FForm :labelWidth="160">
        <FFormItem label="语言切换：">
            <FRadioGroup v-model="lang">
                <FRadio key="cn" :value="zhCN.name">
                    {{ zhCN.desc }}(默认)
                </FRadio>
                <FRadio key="en" :value="enUS.name">{{ enUS.desc }}</FRadio>
                <FRadio key="zr" :value="zr.name">{{ zr.desc }}</FRadio>
            </FRadioGroup>
        </FFormItem>
    </FForm>

    <FDivider />

    <FConfigProvider :locale="locale">
        <FSpace vertical>
            <FPagination
                :total-count="1000"
                show-size-changer
                show-quick-jumper
                show-total
            />
            <FTimePicker />
            <FSpace>
                <FDatePicker :control="true" />
                <FDatePicker type="month" :control="true" />
                <FDatePicker type="year" :control="true" />
                <FDatePicker type="quarter" :control="true" />
                <FDatePicker type="datetime" :control="true" />
                <FDatePicker type="daterange" :control="true" />
                <FDatePicker type="datetimerange" :control="true" />
            </FSpace>

            <FUpload
                action="https://run.mocky.io/v3/2d9d9844-4a46-4145-8f57-07e13768f565"
            />
        </FSpace>
    </FConfigProvider>
</template>

<script setup>
import { ref, watch } from 'vue';
import { enUS, zhCN, zr } from '@fesjs/fes-design';

const lang = ref(zhCN.name);
const locale = ref(zhCN);

watch(lang, () => {
    if (!lang.value) {
        return;
    }
    if (lang.value === zhCN.name) {
        locale.value = zhCN;
    } else if (lang.value === zr.name) {
        locale.value = zr;
    } else {
        locale.value = enUS;
    }
});
</script>

<style scoped></style>

自定义语言

play

<template>
    <FForm :labelWidth="160">
        <FFormItem label="语言切换：">
            <FRadioGroup v-model="lang">
                <FRadio key="cn" :value="zhCN.name">{{ zhCN.desc }}</FRadio>
                <FRadio key="en" :value="enUS.name">{{ enUS.desc }}</FRadio>
            </FRadioGroup>
        </FFormItem>
    </FForm>

    <FDivider />

    <FConfigProvider :locale="locale">
        <FSpace vertical>
            <FDatePicker type="month" :control="true" />
            <FDatePicker type="datetimerange" :control="true" />
        </FSpace>
    </FConfigProvider>
</template>

<script>
import { computed, defineComponent, ref, watch } from 'vue';
import { mergeWith } from 'lodash-es';
import { enUS, zhCN } from '@fesjs/fes-design';

export default defineComponent({
    setup() {
        const lang = ref(zhCN.name);
        const locale = ref(zhCN);

        const CustomLang = computed(() => {
            return {
                [zhCN.name]: {
                    datePicker: {
                        selectStartDateTime: '请选择起始时间',
                        selectEndDateTime: '请选择结束时间',
                    },
                },
                [enUS.name]: {
                    datePicker: {
                        selectStartDateTime: 'Please Select Start Time',
                        selectEndDateTime: 'Please Select End Time',
                    },
                },
            };
        });

        watch(
            lang,
            () => {
                if (!lang.value) {
                    return;
                }
                if (lang.value === zhCN.name) {
                    locale.value = mergeWith(
                        {},
                        zhCN,
                        CustomLang.value[zhCN.name],
                    );
                } else {
                    locale.value = mergeWith(
                        {},
                        enUS,
                        CustomLang.value[enUS.name],
                    );
                }
            },
            {
                immediate: true,
            },
        );

        return {
            enUS,
            zhCN,
            lang,
            locale,
        };
    },
});
</script>

<style scoped></style>

Props

属性	说明	类型	默认值
getContainer	指定弹窗挂载的 DOM 节点	() => HTMLElement	() => document.body
locale	语言包配置，已支持语言包可到这里查看	object	中文
themeOverrides	主题覆盖的 css 选项	object	-