Skip to content

表单多语言

在设计器中提供了强大的多语言支持功能,允许开发者在表单中实现一键式语言切换。在现代业务应用中,多语言支持是一项基本需求,尤其在国际化产品中。

设计器中配置多语言数据

通过 config.localOptions 配置项,开发者可以定义所需的多语言选项。默认情况下,设计器提供简体中文和英文支持。以下是默认配置示例:

js
{
    config: {
        localeOptions: [
            { value: 'zh-cn', label: '简体中文' },
            { value: 'en', label: 'English' },
        ],
    }
}

自定义多语言选项

如果需要添加其他语言,例如繁体中文,可以通过修改 localeOptions 来实现:

js
{
    config: {
        localeOptions: [
            {value: 'zh-cn', label: '简体中文'},
            {value: 'zh-tw', label: '繁體中文'},
        ],
    }
}

预定义多语言数据

通过表单配置options.language可以管理多语言数据

vue
<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    const designer = ref(null);
    onMounted(() => {
        designer.value.setOption({
            //其他表单配置
            //...
            language: {
                "zh-cn": {
                    "Az87OmQS": "商品名称",
                    "BAVvUidu": "商品价格",
                    "CkD1fG2H": "商品描述",
                    "DgH2iJ3K": "库存数量",
                    "EhI3jK4L": "发货方式",
                    "FiJ4kL5M": "配送时间",
                    "GjK5lM6N": "用户评价",
                },
                "en": {
                    "Az87OmQS": "Goods name",
                    "BAVvUidu": "Goods price",
                    "CkD1fG2H": "Product description",
                    "DgH2iJ3K": "Stock quantity",
                    "EhI3jK4L": "Shipping method",
                    "FiJ4kL5M": "Delivery time",
                    "GjK5lM6N": "User reviews",
                    "HkL6mN7O": "Add to cart",
                }
            }
        });
    });
</script>

使用多语言

基础用法

在组件的字段名称、提示信息和验证消息中,可以直接使用多语言变量。例如:{{$t.DgH2iJ3K}}

通过上述配置,用户在不同语言之间切换时,表单内显示的文本会自动更新为相应语言。

组件配置中使用多语言

在组件配置中使用多语言时,需要通过绑定变量的方式进行。例如:

函数中使用多语言

若需要在函数或事件中获取特定的多语言文本,可使用 api.t('DgH2iJ3K') 方法获取对应内容。例如:

js
handleEvent($inject) {
    const message = $inject.api.t('submitSuccessMessage');
    console.log(message);
}

获取当前语言

在某些场景下,您可能需要在接口中使用当前正在使用的语言。可以通过 {{$locale}} 变量获取当前语言代码,例如:

在事件中获取

js
handleEvent($inject) {
    const locale = $inject.api.getData('$locale');
    console.log(locale);
}