开源 FormCreate 表单设计器配置组件的多语言

form-create-designer 是一款开源的低代码表单设计器,通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。

源码地址: Github | Gitee | 文档 | 官网 | 在线演示

定义拖拽规则

在设计表单组件时,可以使用 languageKey 来声明组件的多语言 ID。这使得在组件插入表单时,能够自动管理和匹配对应的多语言配置。

ts 复制代码
const dragRule = {
    type: 'upload2',
    languageKey: ['clickUpload']
    //...
}

组件中使用

在组件实现中,通过 formCreateInject.t 方法可以从多语言配置中读取和显示对应文本。这种方式能够确保文本自动根据语言环境显示相应内容。

vue 复制代码
<template>
    <button>{{formCreateInject.t('clickUpload') || '点击上传'}}</button>
</template>

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

在上述代码中,formCreateInject.t('clickUpload') 将获取并显示"clickUpload" ID 对应的多语言字符串。

数据结构

ts 复制代码
typeof t = (id: string, params?: Object) => string | undefined;
  • 可以使用{param}这种大括号的方式在多语言字符中引入变量。

  • params对象中的值将自动替换多语言字符串中的变量占位符。

示例:传递参数到多语言字符串

假设您有以下的多语言配置和实现:

多语言配置:

json 复制代码
{
  "welcomeMessage": "Welcome, {name}!"
}

使用代码:

vue 复制代码
<template>
    <div>{{formCreateInject.t('welcomeMessage', { name: 'John' })}}</div>
</template>

将生成:

复制代码
Welcome, John!

通过对多语言功能的有效利用,您可以显著提升组件的国际化能力,而不妨碍开发的灵活性。希望这份指南能够帮助您更好地配置和实现多语言支持,使应用更具国际吸引力。

相关推荐
xjt_09013 分钟前
浅析Web存储系统
前端
foxhuli22941 分钟前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔1 小时前
CSS实现百分比水柱图
前端·css
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月1 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu1 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20181 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿1 小时前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘1 小时前
vue文本插值
javascript·vue.js·ecmascript
华子w9089258591 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui