• 多语言组件


    01. 说明

    多语言组件主要在表单中使用,使用多语言组件,为某个表单字段输入多种语言值。

    有两种使用情况:

    1. 打开多语言组件控件

    当打开多语言组件控件后,会出现系统支持的多种语言的输入框,可以选择性输入某种语言的描述,也可以全部输入,依据业务场景决定。

    在这种情况下,多语言组件除了会更改相应表单字段值外,还会默认向Form写入名为_tls的对象数据。

    2. 不打开多语言组件控件

    在这种情况下,多语言组件不会对Form做额外的处理,此时形同普通的Input组件。

    02. API

    参数 说明 类型 默认值 必输
    label label 标签的文本 string '' 是
    field 输入控件唯一标志 string 无 是
    token 数据加密效验值,编辑时必输 string '' 否
    allowClear 是否显示清除按钮 boolean false 否
    width 多语言模态框宽度 string 520px 否
    disabled 是否禁用 boolean false 否

    支持Input组件的其他属性,详情请查看HZERO-UI Input 组件

    03. 使用示例

    // 1. 引入多语言组件
    import TLEditor from 'components/TLEditor';
    
    // 2. 传递_token
    const { form, initData, language } = this.props;
    const { countryCode, countryName, _token } = initData;
    
    // 3. 在表单中使用TLEditor组件
    
    <FormItem label="国家名称">
      {getFieldDecorator('countryName', {
        initialValue: countryName,
        rules: [
          {
            type: 'string',
            required: true,
            message: '请输入国家名称',
            }),
          },
        ],
      })(
        <TLEditor
          label='国家名称'
          field="countryName"
          token={_token}
        />
      )}
    </FormItem>