# custom-form-element

> 基于element-ui的form表单组件

Latest version **1.0.7** (published 2022-04-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install custom-form-element
pnpm add custom-form-element
yarn add custom-form-element
bun add custom-form-element
```

## 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.7 |
| Published | 2022-04-16 |
| First published | 2022-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 92.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | xinliu |
| Maintainers | xinliu |
| Keywords | 自定义表单 |

## Links

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

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.11
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1

## Recent versions

- 1.0.7 (latest) — 2022-04-16
- 1.0.5 — 2022-04-15
- 1.0.4 — 2022-03-18
- 1.0.3 — 2022-03-18
- 1.0.2 — 2022-03-18
- 1.0.1 — 2022-03-18
- 1.0.0 — 2022-03-18

## README

# custom-form-element

基于 element-ui 的 form 表单组件

## 安装

```js
npm install custom-form-element
```

## 插件引入

```js
import CustomForm from "custom-form-element";
Vue.use(CustomForm);
```

## 参数说明

| 名称             | 类型          | 默认值 | 是否必填 | 备注                                        |
| :--------------- | :------------ | :----- | :------- | :------------------------------------------ |
| autoFormData     | Array         | []     | 是       | 表单的数据内容                              |
| inline           | Boolean       | false  | 否       | 表单排列方式，false 纵向排列，true 横向排列 |
| formWidth        | String,Number | 800    | 否       | 表单宽度                                    |
| changeCommit     | Boolean       | false  | 否       | 是否表单内容改变就提交数据                  |
| showSubmitButton | Boolean       | true   | 否       | 是否显示提交按钮                            |
| submitButtonText | String        | 提交   | 否       | 提交按钮的文案                              |

### 使用示例

```html
<CustomForm
  @getFormData="getFormData"
  :autoFormData="formData"
  :inline="inline"
  :formWidth="formWidth"
  :changeCommit="changeCommit"
  :showSubmitButton="showSubmitButton"
  :submitButtonText="submitButtonText"
>
</CustomForm>
```

### autoFormData 数据项

| 名称     | 类型   | 默认值 | 是否必填 | 备注                 |
| :------- | :----- | :----- | :------- | :------------------- |
| title    | String | ""     | 否       | 当前分组名称         |
| code     | String | ""     | 否       | 当前分组 code        |
| parentId | String | 0      | 否       | 当前分组 parentId    |
| formData | Array  | 0      | 是       | 当前分组的表单数据项 |

### autoFormData.formData 数据项

| 名称             | 类型    | 默认值 | 是否必填 | 备注                                                                      |
| :--------------- | :------ | :----- | :------- | :------------------------------------------------------------------------ |
| code             | String  | ""     | 是       | 当前表单项传值的唯一标识                                                  |
| type             | String  | ""     | 是       | 当前表单项的类型                                                          |
| inputType        | String  | ""     | 否       | 当 type=="input"时,必填                                                   |
| placeholder      | String  | ""     | 否       | 当前表单项的占位符                                                        |
| title            | String  | ""     | 是       | 当前表单项的名称                                                          |
| maxlength        | Number  | null   | 否       | 输入框的长度限制                                                          |
| defaultValue     | String  | ""     | 否       | 当前表单项的默认值，同 element-ui 项                                      |
| rules            | Array   | []     | 否       | 当前表单项的校验规则，同 element-ui 项                                    |
| selectOptions    | Array   | []     | 否       | 表单项的选择项内容(id,value,label ) type 为 select,checkbox,radio 时,必填 |
| valueFormat      | String  | ""     | 否       | type 为选择时间的类型时，选择结果的格式，同 element-ui                    |
| seprator         | String  | "至"   | 否       | 时间段选择控件，中间字的文案，同 element-ui                               |
| startPlaceholder | String  | ""     | 否       | 时间段选择控件，开始时间的占位符，同 element-ui                           |
| endPlaceholder   | String  | ""     | 否       | 时间段选择控件，结束时间的占位符，同 element-ui                           |
| format           | String  | ""     | 否       | type 为选择时间的类型时，选择结果展示的格式，同 element-ui                |
| remarkText       | String  | ""     | 否       | 当前表单项的备注信息                                                      |
| customContent    | Boolean | false  | 否       | 自定义插槽                                                                |
| multiple         | Boolean | false  | 否       | type 为 select 时，是否多选                                               |
| tooltipText      | String  | ""     | 否       | 表单释义                                                                  |

### formData.type

| 名称                | 备注               |
| :------------------ | :----------------- |
| input               | input 类型的输入框 |
| textarea            | 多行输入框         |
| select              | 下拉框             |
| checkbox            | 复选框             |
| radio               | 单选框             |
| switch              | 开关               |
| datepicker          | 日期选择框         |
| daterangepicker     | 日期范围选择框     |
| weekpicker          | 周选择框           |
| monthpicker         | 月选择框           |
| monthrangepicker    | 月份范围           |
| yearpicker          | 年选择框           |
| timepicker          | 时间选择器         |
| timerangepicker     | 时间段选择器       |
| datetimepicker      | 日期时间选择器     |
| datetimerangepicker | 日期时间段选择器   |

#### formData.inputType

当 formData.type == input 时,区别 input 类型表单的具体分类

| 名称     | 备注       |
| :------- | :--------- |
| text     | 文本输入框 |
| password | 密码输入框 |
| number   | 数字输入框 |

### 使用示例

```js
data() {
    return {
      inline: false,
      formClass: "offInlineForm",
      formData: [
        {
          code: "inputText",
          type: "input",
          inputType: "text",
          placeholder: "请输入",
          title: "单行输入框",
          maxlength: 16,
          defaultValue: "123"
        },
        {
          code: "inputPassword",
          type: "input",
          inputType: "password",
          placeholder: "请输入",
          title: "密码输入框",
          maxlength: 30,
          defaultValue: "123"
        },
        {
          code: "textarea",
          type: "textarea",
          inputType: "",
          placeholder: "请输入",
          title: "多行输入框",
          maxlength: 300,
          defaultValue: "123"
        },
        {
          code: "inputNumber",
          type: "input",
          inputType: "number",
          placeholder: "请输入数字",
          title: "数字输入框",
          defaultValue: 123,
          rules: [
            {
              required: true,
              message: "不能为空"
            }
          ]
        },
        {
          code: "select",
          type: "select",
          placeholder: "请选择",
          title: "下拉选择框",
          selectOptions: [
            {
              id: 1,
              label: "北京2",
              value: 1
            },
            {
              id: 2,
              label: "上海2",
              value: 2
            }
          ],
          defaultValue: 1
        },
        {
          code: "checkbox",
          type: "checkbox",
          placeholder: "请选择",
          title: "checkbox复选框",
          selectOptions: [
            {
              id: 3,
              label: "北京2",
              value: 3
            },
            {
              id: 4,
              label: "上海2",
              value: 4
            }
          ],
          defaultValue: [3, 4]
        },
        {
          code: "radio",
          type: "radio",
          title: "radio单选",
          selectOptions: [
            {
              id: 5,
              label: "北京2",
              value: 5
            },
            {
              id: 6,
              label: "上海2",
              value: 6
            }
          ],
          defaultValue: 5
        },
        {
          code: "switch",
          type: "switch",
          title: "开关",
          defaultValue: true
        },
        {
          title: "日期选择框",
          code: "datepicker",
          type: "datepicker",
          placeholder: "请选择日期",
          // valueFormat: "yyyy年MM月dd日",
          defaultValue: new Date().getTime() // 格式跟valueFormat保持一致
        },
        {
          title: "选择日期范围",
          code: "daterangepicker",
          type: "daterangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始日期",
          endPlaceholder: "请选择结束日期",
          format: "yyyy年MM月dd日",
          valueFormat: "yyyy-MM-dd",
          defaultValue: ["2022-01-12", "2022-03-12"]
          // pickerOptions: timeToToday
        },
        {
          title: "周选择框",
          code: "weekpicker",
          type: "weekpicker",
          placeholder: "请选择周",
          format: "yyyy 第 WW 周",
          valueFormat: "yyyy年MM月dd日", // 不能是第几周的数字
          defaultValue: "2022年03月21日" // 格式必须是周一的一天，不能是数字
          // pickerOptions: timeToToday
        },
        {
          title: "月选择框",
          code: "monthpicker",
          type: "monthpicker",
          placeholder: "请选择月",
          format: "yyyy年MM月",
          valueFormat: "yyyy-MM",
          // valueFormat: "timestamp",
          defaultValue: "2022-02" // 格式跟valueFormat 保持一致
          // pickerOptions: timeToToday
        },
        {
          title: "选择月份范围",
          code: "monthrangepicker",
          type: "monthrangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始月份",
          endPlaceholder: "请选择结束月份",
          format: "yyyy年MM月",
          valueFormat: "yyyy年MM月",
          defaultValue: ["2022年01月", "2022年03月"]
          // pickerOptions: timeToToday
        },
        {
          title: "年选择框",
          code: "yearpicker",
          type: "yearpicker",
          placeholder: "请选择年",
          format: "yyyy年",
          valueFormat: "yyyy年",
          defaultValue: "2022年"
          // pickerOptions: timeToToday
        },

        {
          title: "时间选择器",
          code: "timepicker",
          type: "timepicker",
          placeholder: "请选择时间",
          defaultValue: "12:12:12"
          // pickerOptions: timeToNow
        },
        {
          title: "时间段选择器",
          code: "timerangepicker",
          type: "timerangepicker",
          seprator: "到",
          startPlaceholder: "请选择开始时间",
          endPlaceholder: "请选择结束时间",
          valueFormat: "HH:mm:ss",
          defaultValue: ["11:11:11", "12:12:12"]
          // pickerOptions: timeToNow
        },
        {
          title: "日期时间选择器",
          code: "datetimepicker",
          type: "datetimepicker",
          placeholder: "选择日期时间",
          valueFormat: "yyyy年MM月dd日 HH:mm:ss",
          defaultValue: "2022-01-01 12:12:12"
          // pickerOptions: timeToToday
        },
        {
          title: "日期时间段选择器",
          code: "datetimerangepicker",
          type: "datetimerangepicker",
          separator: "到",
          startPlaceholder: "请选择开始时间",
          endPlaceholder: "请选择结束时间",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
          // pickerOptions: timeToToday,
          rules: [
            {
              required: true,
              message: "时间段不能为空"
            }
          ],
          defaultValue: ["2022-01-01 00:00:01", "2022-03-01 23:59:59"] // 格式跟valueFormat 保持一致
        }
      ],
    };
  },
```

### 自定义插槽的使用示例

```js
data(){
  return{
    formData:[{
      title: "自定义插槽",
      code: "customContent",
      type: "customContent",
      customContent: true,
    }]
  }
}
```

```html
<CustomForm
  @getFormData="getFormData"
  :autoFormData="formData.data"
  :inline="inline"
  :formWidth="formWidth"
  :title="formData.title"
  :changeCommit="changeCommit"
  :showSubmitButton="showSubmitButton"
  :submitButtonText="submitButtonText"
>
  <template v-slot:customContent>
    <!-- 插槽名称为code名称 -->
    <div>
      <el-tabs>
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>
    </div>
  </template>
</CustomForm>
```

## 事件

| 名称        | 回调参数 | 说明                   |
| :---------- | :------- | :--------------------- |
| getFormData | formData | 获取表单提交的数据结果 |

### 事件使用示例

```js
getFormData(formData) {
      // console.log(formData);
      this.formDataList = formData;
    }
```

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