Component i18n

Configure multi-language support for components in the designer to make them easier to localize.

Before reading this article, see the Extend Components documentation to understand basic concepts.

Define Drag Rule

When designing form components, use languageKey to declare the component's multi-language ID. This enables automatic management and matching of corresponding multi-language configurations when components are inserted into forms:

const dragRule = {
    type: 'upload2',
    languageKey: ['clickUpload']
    //...
}

Use in Components

In component implementation, read and display corresponding text from multi-language configurations through the formCreateInject.t method. This ensures text is automatically displayed according to the language environment:

<template>
    <button>{{formCreateInject.t('clickUpload') || 'Click to Upload'}}</button>
</template>

<script>
    export default {
        props: {
            formCreateInject: Object
        }
    }
</script>

In the code above, formCreateInject.t('clickUpload') retrieves and displays the multi-language string corresponding to the "clickUpload" ID.

Data Structure

typeof t = (id: string, params?: Object) => string | undefined;

• Use {param} syntax with curly braces to introduce variables in multi-language strings
• Values in the params object automatically replace variable placeholders in multi-language strings

Example: Pass Parameters to Multi-language String

Suppose you have the following multi-language configuration and implementation:

Multi-language configuration:

{
  "welcomeMessage": "Welcome, {name}!"
}

Usage code:

<template>
    <div>{{formCreateInject.t('welcomeMessage', { name: 'John' })}}</div>
</template>

Will generate:

Welcome, John!

Multi-language functionality enhances your component's internationalization capabilities while maintaining development flexibility.