# mixed-form

> 基于Artery-UI实现的可配置组合表单

Latest version **0.2.5** (published 2020-12-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install mixed-form
pnpm add mixed-form
yarn add mixed-form
bun add mixed-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.5 |
| Published | 2020-12-31 |
| First published | 2020-12-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhangzhenqing |
| Maintainers | iraymond |

## Links

- npm: https://www.npmjs.com/package/mixed-form
- Repository: http://git.thunisoft.com/t3c/codes/t3-scene/pcpt/mixed-form
- npm.io page: https://npm.io/package/mixed-form

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [@com.thunisoft.artery/artery-ui](https://npm.io/package/@com.thunisoft.artery/artery-ui.md) 1.1.2

## Recent versions

- 0.2.5 (latest) — 2020-12-31
- 0.1.2 — 2020-12-24
- 0.1.1 — 2020-12-24
- 0.1.0 — 2020-12-24
- 0.0.9 — 2020-12-24

## README

复合表单组件

# mixed-form

## 本地开发

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

## 用法


### 全局方式

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

Vue.use(MixedForm)
```

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

### 单独引用

```jsx
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|单选按钮|

### 支持动态模板

```javascript
{
  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`方法修改支持的样式
#### 目前支持的样式

```css
--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`修改目标值，命名规格为驼峰形式

```javascript
import MixedForm from 'mixed-form'

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

```

# 0.2.2
修复lodash错误

# 0.2.3
只读情况去掉添加按钮

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

---
_Source: https://npm.io/package/mixed-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._