# hatech-web-component-form

> 表单组件，提供快速展示表单功能

Latest version **1.2.0** (published 2022-06-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install hatech-web-component-form
pnpm add hatech-web-component-form
yarn add hatech-web-component-form
bun add hatech-web-component-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.2.0 |
| Published | 2022-06-09 |
| First published | 2022-06-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 31.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wuhao |
| Maintainers | freshhu |
| Keywords | form |

## Links

- npm: https://www.npmjs.com/package/hatech-web-component-form
- Repository: http://git.hatech.com.cn:8088/hatech-web/hatech-web-component-form
- npm.io page: https://npm.io/package/hatech-web-component-form

## Dependencies (3)

- [element-ui](https://npm.io/package/element-ui.md) ^2.14.1
- [hatech-web-component](https://npm.io/package/hatech-web-component.md) ^0.0.8
- [hatech-web-component-table](https://npm.io/package/hatech-web-component-table.md) ^0.0.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2022-06-09

## README

# 前端表单组件

提供通过配置快速展示Form表单，支持Element-UI中常用元素，如Input\Select\Radio等

主要思路是依托于ElementUI的Form通过类型映射，展示表单项。

---
## 使用说明

### 安装

```sh
  npm install hatech-web-component-form
```

### 初始化

```js
  // main.js
  import Vue from 'vue'
  import HatechForm from 'hatech-web-component-form'
  Vue.use(HatechTable)
  // or
  import { HatechForm } from 'hatech-web-component-form'
  export default {
    components: {
      HatechForm
    }
  }
```

### 使用示例

```html
  <hatech-form :config="config" :data="data" @onEvent="onEvent"></hatech-form>
```
```js
  export default {
    data() {
      return {
        data: {
          ...
        },
        config: {
          ...
        }
      }
    }
  }
```

### 参数
<!-- 说明组件所需参数 -->

| 参数名                       | 类型             | 描述                                             |
| ---------------------------- | ---------------- | ------------------------------------------------ |
| data                         | Object           | 数据源                                           |
| config                       | Object           | 配置                                             |
| config.form                  | Object           | 表单配置项，支持el-form所有属性                  |
| config.row                   | Object           | 栅格布局参数，支持el-row所有属性                 |
| config.columns               | Array            | 表单项配，支持el-form-item中的所有属性置         |
| config.columns[].type        | String           | 表单项类型，详见下表表单项配置类型               |
| config.columns[].{MODE}Type  | String           | 模式对应表单项类型                               |
| config.columns[].show        | Boolean\Function | 是否展示表单项，如果值为函数，需要返回Boolean值 |
| config.columns[].col         | Object           | 栅格布局参数，支持el-col所有属性                 |
| config.columns[].props       | String           | 具体展示组件属性，详细可见element-ui组件文档     |
| config.columns[].{MODE}Props | Object           | 对应模式配置                                     |
| config.columns[].props.event | String           | 相关事件名                                      |
#### 表单项配置类型

| 类型值                         | 类型名称       | 说明                                                                                           |
| ------------------------------ | -------------- | ---------------------------------------------------------------------------------------------- |
| slot                           | 插槽           | 插槽名同prop属性                                                                               |
| text                           | 文本、html显示 | 通过props内设置type='html'展示html                                                             |
|                                |                | 当type=html时，可使用key对应元素属性，event对应抛出事件名                                     |
| input                          | 输入框         | 同el-input。添加modifier属性，支持修饰符值                                                     |
| number                         | 数字输入框     | 同el-input-number                                                                              |
| radio                          | 单选框         | 同el-radio                                                                                     |
| checkbox                       | 多选框         | 同el-checkbox                                                                                  |
| select                         | 下拉框         | 同el-select                                                                                    |
| date                           | 日期选择框     | 同el-date-picker                                                                               |
| time                           | 时间选择框     | 同el-time-picker                                                                               |
| cascader                       | 级联           | 同el-cascader                                                                                  |
| switch                         | 开关           | 同el-switch                                                                                    |
| slider                         | 滑块           | 同el-slider                                                                                    |
| rate                           | 评分           | 同el-rate                                                                                      |
| transfer                       | 穿梭框         | 同el-transfer                                                                                  |
| progress                       | 进度条         | 同el-progress                                                                                  |
| tree                           | 树形控件       | 同el-tree,触发的事件由`onFormTreeEvent`传出                                                    |
| table                          | 表格控件       | 同hatech-table触发的事件由`onFormTableEvent`传出                                               |
| button                         | 按钮控件       | options 同el-button                                                                            |
| custom（自定义组件后半段名称） | 自定义组件     | 以Form开头，比如FormCustomerComponent，且此组件需要全局注册；但type中只要写CustomerComponent； |
****
### 插槽

### 当type为slot时，提供同prop值一样的插槽

#### ...

### 事件
<!-- 说明组件提供的事件 -->

#### `onEvent`: 事件总处理，所有事件都由此事件发射 
  * `event`: {String} 子事件名
  * `params`: {Object} 事件相关参数

#### `onFormDataChange`: 表单数据变化
  * `newValue`: 新值
  * `oldValue`: 旧值
  * `item`: 表单项配置

#### `onFormTreeEvent`: 树相关事件传递
  * `event`: 事件名
  * `params`: 事件参数

#### `onFormTableEvent`: 表格相关事件传递
  * `event`: 事件名
  * `params`: 事件参数

#### `onFormButtonEvent`: 按钮点击相关事件
  * `params`: 按钮配置

### 主题变量

未使用主题变量

### 依赖

| 依赖名               | 版本  | 链接                                                                       |
| -------------------- | ----- | -------------------------------------------------------------------------- |
| hatech-web-component | 0.0.8 | http://git.hatech.com.cn:8088/hatech-web/hatech-web-template-component.git |


---

## 知识点？

### 使用共识？
如已提供相关表单项，可直接使用。有个性化需要，请通过slot实现

---
## 特点？

该组件属性纯组件中的表单组件，属于基础组件

---
## 作者/维护者
<!-- 提供联系方式，方便后续沟通 -->
| 名称 | 联系方式              | 参与部分     |
| ---- | --------------------- | ------------ |
| 吴浩 | wuhaowh@hatech.com.cn | 初始版本开发 |

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