复合表单组件

mixed-form

本地开发

npm install
npm run dev
open http://localhost:8222

用法

全局方式

import Vue from 'vue'
import MixedForm from 'mixed-form'
import './mixed-form/dist/main.css'

Vue.use(MixedForm)

<mixed-form :data="data" :value="value" @change="handleChange"></mixed-form>

单独引用

import MixedForm from 'mixed-form'
import CATEGORY1 from './config/category-1'
import CATEGORY2 from './config/category-2'
import './mixed-form/dist/main.css'

const data = async () => ({
  type: 'accordion',
  data: [
    await CATEGORY1(),
    await CATEGORY2()
  ]
})

export default {
  data () {
    return {
      value: [], // 用于从后端抓取并展示的原始数据
      template: {} // 有些数据，比如下拉列表数据需要提前获取到，并应用于模板配置
    }
  },
  async created () {
    this.fetchData()
    const template = await data()
    this.template = template
  },
  methods: {
    hanleChange (value) {
      // 更新后的值在此处可以取到，用于保存
    },
    fetchData () {
      // 此处用于获取已保存的数据，并需要将返回值赋值给value
    }
  },
  render () {
    return <div>
      <div class="title-1">
        <t3icon type="lianshenpi"
          class="icon-cls-less"
          size="16"></t3icon>
        <span class="text">个人财产清册</span>
      </div>
      <MixedForm value={this.value} onChange={this.hanleChange} style={{ marginTop: '10px' }} data={this.template} />
    </div>
  }
}

模板配置方式

支持的表单类型

|type|说明| |----|----| |input|输入框| |select|单选| |multiple-select|多选| |date-picker|日期选择| |date-range-picker|日期范围选择| |radio|单选按钮|

支持动态模板

{
  type: 'card',
  header: { /* your config */ },
  body: {
    type: 'form',
    multiple: true,
    title: '银行账户',
    addButtonText: '继续添加其他银行账户',
    alert: '需要申请人提供收入状况证明材料',
    template: function (data) {
      return data.bank === '中国银行' ? dataSource : [
        [
          {
            name: '银行名称',
            prop: 'bank',
            type: 'select',
            value: '中国银行',
            required: true,
            options: [
              '中国银行', '中国工商银行'
            ]
          },
          {
            name: '银行账号',
            prop: 'account',
            type: 'input'
          }
        ]
      ]
    },
    data: [
      {
        bank: '中国银行',
        account: '60123456789100',
        description: 'China Bank'
      }
    ]
  }
}

0.1.8

移除.npmignore中dist，防止npm publish时无法获取dist中的文件

0.1.9

移除package.json中的mixed-form依赖，解决循环加载包的问题

0.2.0

提供动态修改组件样式的功能，通过useTheme方法修改支持的样式

目前支持的样式

--mf-form-border-color: #e8e8e8;
--mf-form-name-background-color: #f9f9f9;
--mf-form-name-font-color: #333;
--mf-form-name-font-size: 14px;
--mf-form-name-line-height: 22px;
--mf-form-item-height: 34px;
--mf-form-item-font-size: 14px;
--mf-form-item-font-color: #333;
--mf-form-name-required-color: #f60;
--mf-form-item-input-icon-color: #03f;
--mf-form-item-input-icon-size: 16px;

可通过useTheme修改目标值，命名规格为驼峰形式

import MixedForm from 'mixed-form'

MixedForm.useTheme({
  mfFormBorderColor: '#999'
})

0.2.2

修复lodash错误

0.2.3

只读情况去掉添加按钮

0.2.4

修复bug，增加表单类型type="radio"