vue-remote-component/custom-form

网关自定义表单

开发手册

自定义表单建议使用jsx来开发，因为render函数的效率比tmeplate高。

如何在jsx中使用v-html指令？

<div domPropsInnerHTML={htmlStr}></div>

组件扩展参数定义

在项目的 config.js 文件中配置组件的扩展参数

import { WidgetType, FieldType } from './commons/enums'

/**
 * 自定义组件配置
 */
export default [
  {
    defaultValue: '30', // 如果是多选则存储的为JSON数组
    description: '请求包超时时间（以配置一分钟举例，发送时时间戳为7:15:10，服务器接收到请求时服务器时间为7:16:11，这个请求包已经超时）',
    fieldType: FieldType.INTEGER,
    name: 'timeStamp',
    regExp: /^\d+$/,
    required: true,
    title: '超时时间',
    config: {
      type: WidgetType.SELECT,
      source: '',
      optopnHandler: null,
      option: [{ value: '', text: '' }],
      width: '100%',
      maxLength: 180,
      /**
       * 1.下拉、多选
       * 输入选项文本与值，用:分隔，例如：
       * 北京:bj
       * 四川:sc
       * 2.输入框及文本域
       * 直接输入则为默认值
       * 3.时间
       * 输出时间格式，如：
       * YYYY-MM-DD HH:mm:ss
       */
      content: '',
    }
  }
]

如何在jsx中使用具名插槽？

通过 scopedSlots 属性来设置具名插槽

export default {
  name: 'TestTable',
  data() {
    return {
      columns: [
        {
          dataIndex: 'name',
          key: 'name',
          slots: { title: 'customTitle' },
          scopedSlots: { customRender: 'name' },
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
          scopedSlots: { customRender: 'tags' },
        },
        {
          title: 'Action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      rows: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ]
    }
  },
  render() {
    const TagList = ({ props }) => {
      return props.tags.map(tag => (
        <a-tag
          key={tag}
          color={tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'}
        >
          {tag.toUpperCase()}
        </a-tag>
      ))
    }
    const scopedSlots = {
      name: value => (<a>{value}</a>),
      tags: value => (<span><TagList tags={value} /></span>),
      action: (value, record) => (
        <span>
          <a>Invite 一 {record.name}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
        </span>
      )
    }
    return (
      <a-table
        columns={this.columns}
        dataSource={this.rows}
        {...{scopedSlots}}
      >
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
      </a-table>
    )
  }
}

编译发布

打包

执行打包命令

npm run build

发布

将打包后生成的 dist/form.umd.min.js 文件上传至组件中。