表单多语言
在设计器中提供了强大的多语言支持功能,允许开发者在表单中实现一键式语言切换。在现代业务应用中,多语言支持是一项基本需求,尤其在国际化产品中。
设计器中配置多语言数据
通过 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);
}