开源表单设计器FcDesigner配置多语言教程

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

设计器中配置多语言数据

通过 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);
}

验证规则中获取组件标签名称

在验证提示中，自动将 {title} 替换为标签名称，以提供更具上下文的提示信息。

text 复制代码

请输入{title}

通过这些功能，开发者可以方便地集成多语言支持，使得表单在不同语言环境下都能具有良好的用户体验。