表单多语言支持

FormCreate 提供了一套完善的多语言解决方案，允许开发者轻松实现表单内语言的动态切换。这对国际化应用至关重要，能够显著提升用户体验。以下是详细的实现方案与示例。

示例

定义多语言数据

通过 options.language 选项，可以定义所需的多语言数据结构。每一种语言可通过唯一的标识符来设置文本内容。

示例代码

const options = {
  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"
    }
  }
};

使用多语言变量

在创建表单时，可以直接在组件的 title、info、validate.message 字段和自定义属性 required 中解析多语言变量。

示例 1: 基本字段配置

[
  {
    type: "input",
    field: "Fkgim5c40456acc",
    title: "{{$t.Az87OmQS}}",
    info: "{{$t.BAVvUidu}}",
    "$required": "{{$t.CkD1fG2H}}",
    validate: [
      {
        type: "string",
        mode: "min",
        trigger: "blur",
        message: "{{$t.GjK5lM6N}}"
      }
    ]
  }
]

示例 2: 配置项的多语言

将多语言应用于配置项，需要结合自定义属性loadData以动态调整组件的占位提示或其他属性。

[
  {
    "type": "input",
    "field": "Fkgim5c40456acc",
    "title": "{{$t.Az87OmQS}}",
    "info": "{{$t.BAVvUidu}}",
    "$loadData": [
      {
        "attr": "$t.HkL6mN7O",
        "to": "props.placeholder"
      }
    ]
  }
]

切换多语言

通过 locale 参数可以控制表单的语言切换。设置 locale 可以在不同语言之间动态切换。

示例

<template>
  <form-create :locale="locale"></form-create>
</template>


<script setup>
const locale = 'en'; // 中文则使用: 'zh-cn'
</script>

通过locale自定义语言数据

同样可以在组件级别自定义语言数据，通过设置 locale 参数实现。

示例

<template>
  <form-create :locale="locale"></form-create>
</template>


<script setup>
const locale = {
  name: 'en',
  "Az87OmQS": "Goods name",
  "BAVvUidu": "Goods price",
  "CkD1fG2H": "Product description",
  "DgH2iJ3K": "Stock quantity",
  "EhI3jK4L": "Shipping method",
  "FiJ4kL5M": "Delivery time",
  "GjK5lM6N": "User reviews"
};
</script>

注意事项

• 多语言标识符唯一性: 确保每个多语言文本都使用唯一的标识符以避免覆盖。
• 动态更新: 使用 $t 和 $loadData 可以灵活地实现动态文本更新。
• 全局与局部设置: 可以通过全局的 options.language 以及局部的 locale 实现多语言配置的灵活组合。

通过上述设置和代码示例，开发者可以轻松实现表单内的多语言支持，满足国际化应用的需求。