• 多语言组件


    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>