# heyi-form

> 基于element UI 表单组件

Latest version **1.0.0** (published 2021-02-09) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2021-02-09 |
| First published | 2021-02-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 94.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | dengl0201@163.com |
| Maintainers | heyisoftware |

## Links

- npm: https://www.npmjs.com/package/heyi-form
- npm.io page: https://npm.io/package/heyi-form

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [element-ui](https://npm.io/package/element-ui.md) ^2.14.1

## Recent versions

- 1.0.0 (latest) — 2021-02-09

## README

# heyi-table

> 基于element UI 表单组件

## Build Setup

``` bash
# 安装方式
npm i heyi-form -S

# 表单校验说明
目前校验存在问题，已经移除，后续会加

# 引入
import hytable from 'heyi-form'
Vue.use(hytable.formCommon)

# 使用方式
 <hyForm :form='demo' :searchForm="itemDemo" @handleBtnClick="handleBtn"  />

# 参数说明
 表单数据
 demo: {
    checkBoxDemo: [],//存在多选时必填
    },

# 使用示例
itemDemo: [
                {
                    type: "input", //输入框类型
                    label: "姓名", //标题名
                    prop: "name", //对应字段
                    colSpan: 24, //单行宽度
                    placeholder: "我是输入框", //提示占位符
                    clearable: true,
                },
                {
                    type: "input",
                    label: "电话",
                    prop: "phone",
                    colSpan: 24,
                    placeholder: "请输入手机号",
                    clearable: true,
                },
                {
                    type: "select",
                    label: "测试下拉",
                    prop: "selectDemo",
                    colSpan: 24,
                    // 多选框数据
                    options: [
                        { label: "男", value: "M" },
                        { label: "女", value: "F" },
                    ],
                    multiple: false, //是否可多选
                    clearable: true, //是否可清楚
                    //触发事件
                    change: (e) => {
                        console.log(e);
                    },
                },
                {
                    type: "date", //时间选择器类型，可选值：日期：date；时间：time；日期时间：datetime
                    label: "时间",
                    prop: "dateDemo",
                    colSpan: 24,
                },
                {
                    type: "switch",
                    label: "开关",
                    prop: "switchDemo",
                    activeValue: 0, //选中（打开）状态
                    inactiveValue: 1, //未选中（未打开）状态
                    colSpan: 24,
                    change: (e) => {
                        console.log(e);
                    },
                },
                {
                    type: "radio",
                    label: "单选",
                    prop: "radioDemo",
                    radios: [
                        {
                            label: "测试1",
                            value: 0,
                        },
                        {
                            label: "测试2",
                            value: 1,
                        },
                        {
                            label: "测试3",
                            value: 2,
                        },
                    ],
                    colSpan: 24,
                },
                {
                    type: "Checkbox",
                    label: "多选",
                    prop: "checkBoxDemo", //注意：在使用checkBox时，此处绑定字段需要先在表单数据中定义类型为数组
                    checkboxs: [
                        { label: "测试1", value: "0" },
                        { label: "测试2", value: "1" },
                    ],
                    colSpan: 24,
                },

                {
                    type: "btns",
                    label: "",
                    prop: "",
                    //按钮组
                    btns: [
                        {
                            name: "提交按钮", //按钮名称
                            clickType: "submit", //触发事件，可用于判断提交还是重置等
                            btnSize: "mini", //按钮尺寸
                            btnType: "success", //按钮类型
                        },
                        {
                            name: "返回按钮",
                            clickType: "goback",
                            btnSize: "mini",
                            btnType: "waring",
                        },
                    ],
                },
            ],

```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).

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