I18n

FormCreate provides a comprehensive multi-language solution that lets you easily implement dynamic language switching within forms. This is crucial for internationalized applications and significantly improves user experience. Below are detailed implementation solutions and examples.

Example

Defining Multi-Language Data

Using the options.language option, you can define the multi-language data structure. Each language can set text content using unique identifiers.

Example Code

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"
    }
  }
};

Using Multi-Language Variables

When creating forms, directly parse multi-language variables in component title, info, validate.message fields and the custom property required.

Example 1: Basic Field Configuration

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

Example 2: Multi-Language for Configuration Items

To apply multi-language to configuration items, combine the custom property loadData to dynamically adjust component placeholder hints or other properties.

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

Switching Languages

Language switching in forms is controlled via the locale parameter. Setting locale enables dynamic switching between different languages.

Example

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


<script setup>
const locale = 'en'; // For Chinese use: 'zh-cn'
</script>

Customizing Language Data via locale

You can also customize language data at the component level by setting the locale parameter.

Example

<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>

Using i18n

After setting the t parameter, the form automatically calls i18n to display the corresponding translated text.

<template>
  <form-create :t="$t"></form-create>
</template>

Notes

• Multi-Language Identifier Uniqueness: Ensure each multi-language text uses a unique identifier to avoid overwriting.
• Dynamic Updates: Using $t and $loadData enables flexible dynamic text updates.
• Global and Local Settings: Multi-language configuration can be flexibly combined through global options.language and local locale.

With the above settings and code examples, developers can easily implement multi-language support within forms to meet the needs of internationalized applications.