多语言支持

默认中文

默认语言为中文，包含 表单内容多语言 和 ajv校验信息 两部分。

配置多语言

表单内容多语言

• 配置默认form-footer 确认和取消按钮

formFooter = {
    okBtn: 'Save', // 确认按钮文字
    cancelBtn: 'Cancel' // 取消按钮文字
}

• 配置表单渲染多语言文案

直接通过对应的 schema 配置即可，另外需要借助你项目本身提供的翻译方法实现。

提示

这里推荐所有需要多语言的文案都通过 ui-schema 配置

这样可以保证 schema 为标准的JSON Schema语法，方便需要后端统一校验的时候快速转换给后端使用。

如：

<template>
    <vue-form
        v-model="formData"
        :schema="schema"
        :form-footer="formFooter"
        :ui-schema="uiSchema"
    >
    </vue-form>
</template>
<script>
// 模拟语言包
const transKeyMap = {
    userName: 'Username'
};

// 模拟翻译方法
const trans = key => transKeyMap[key] || `transKeyMap.${key}`;

export default {
    name: 'Demo',
    data() {
        return {
            formData: {},
            schema: {
                type: 'object',
                required: [
                    'userName'
                ],
                properties: {
                    userName: {
                        type: 'string',
                        title: '用户名'
                    }
                }
            },
            formFooter: {
                okBtn: 'Save', // 确认按钮文字
                cancelBtn: 'Cancel' // 取消按钮文字
            },
            uiSchema: {
                userName: {
                    'ui:options': {
                        title: trans('userName')
                    },
                }
            },
        };
    }
};
</script>

显示代码

复制代码 | 在线运行

默认表单校验信息多语言

schema校验使用 ajv ，i18n 直接使用 ajv i18n (opens new window)

npm install ajv-i18n

项目中导入你需要的语言：

import localizeEn from 'ajv-i18n/localize/en';
import { i18n } from '@lljj/vue-json-schema-form';

// 设置使用语言
i18n.useLocal(localizeEn);