# simple-element

> ## 对 element 常用组件的封装，易于上手。

Latest version **0.5.3** (published 2021-03-06) · 0 weekly downloads

## Install

```sh
npm install simple-element
pnpm add simple-element
yarn add simple-element
bun add simple-element
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2021-03-06 |
| First published | 2019-12-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Maintainers | hxc |

## Links

- npm: https://www.npmjs.com/package/simple-element
- Repository: https://github.com/Nick742037091/simple-element
- Homepage: https://github.com/Nick742037091/simple-element#readme
- Issues: https://github.com/Nick742037091/simple-element/issues
- npm.io page: https://npm.io/package/simple-element

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vuex](https://npm.io/package/vuex.md) ^3.1.2
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.10.1
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1

## Recent versions

- 0.5.3 (latest) — 2021-03-06
- 0.5.2 — 2021-03-05
- 0.5.1 — 2021-03-05
- 0.5.0 — 2021-03-05
- 0.4.9 — 2021-03-05
- 0.4.8 — 2021-01-07
- 0.4.7 — 2020-12-14
- 0.4.6 — 2020-07-15
- 0.4.5 — 2020-07-08
- 0.4.4 — 2020-07-07
- 0.4.3 — 2020-07-04
- 0.4.2 — 2020-06-18
- 0.4.1 — 2020-06-16
- 0.4.0 — 2020-06-16
- 0.3.1 — 2020-06-16
- … 21 more at https://npm.io/package/simple-element/versions

## README

# 介绍

## 对 element 常用组件的封装，易于上手。

# 安装

## npm:

> \$ npm install simple-element

## yarn:

> \$ yarn add simple-element

# 快速使用

```
// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import SimpleElement from 'simple-element'

// 引入Element组件，可按需引入 https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru
Vue.use(ElementUI)
// 引入SimpleElement组件
Vue.use(SimpleElement)

```

## 通用组件

### com-dialog

通用弹窗组件，内部实现滚动和关闭自动回滚到顶部的功能。用于作为组件根布局。

|         属性         |   类型   | 默认值 |              描述               |
| :------------------: | :------: | :----: | :-----------------------------: |
|       visible        |   bool   | false  |            是否可见             |
|        title         |  string  |   ''   |              标题               |
|       loading        |   bool   | false  |    是否显示标题栏的 loading     |
| close-on-click-modal |   bool   | false  |     点击 modal 是否关闭弹窗     |
|        width         |  string  |   ''   |            弹窗宽度             |
|      max-height      |  string  | '70vh' |      弹窗内容区域最大高度       |
|     before-close     | function |  null  |     点击关闭按钮的回调函数      |
|       其他属性       |    --    |   --   | 自动绑定在内部 el-dialog 组件上 |

### com-form

通用表单组件，封装了表单元素的自动生成、校验、确认按钮和取消按钮。

|      属性      |  类型   | 默认值  |                              描述                              |
| :------------: | :-----: | :-----: | :------------------------------------------------------------: |
|      form      | object  |   {}    |                            表单数据                            |
|     inline     | boolean |  false  |                 表单元素和标题是否显示在同一行                 |
|   renderAll    | boolean |  false  |      是否全部表单元素通过插槽插入，不使用自动生成组件功能      |
|     rules      | object  |   {}    |       表单校验规则，非空时才有效，与 renderAll 搭配使用        |
| labelPosition  | string  | 'left'  |            表单元素标题位置，可选值：top/left/right            |
|   labelWidth   | string  | '100px' |                        表单元素标题宽度                        |
|    loading     | boolean |  false  | 是否显示加载状态。加载时，表单区域会显示半透明，不可输入和点击 |
|     rowLen     | number  |    2    |                    每一行容纳的表单元素数量                    |
| submitBtnLabel | string  | '确认'  |                          确认按钮文字                          |
| cancelBtnLabel | string  | '取消'  |                          取消按钮文字                          |
| showBottomBtn  | boolean |  true   |                     显示底部确认和取消按钮                     |
| showSubmitBtn  | boolean |  true   |                        显示底部确认按钮                        |
| showCancelBtn  | boolean |  true   |                        显示底部取消按钮                        |
|    rowList     |  array  |   []    |             可根据该属性自动生成表单元素,详情如下              |

#### rowList 属性为二维数组，元素可为以下选项

1. 对象，用于单独实现一行表单数组。值为{ render: true, type: xxx, ...}，即必须包含 render 属性且值为 true。
2. 数组，对应的字段如下表。

|    键值     |  类型   |                                   描述                                   |
| :---------: | :-----: | :----------------------------------------------------------------------: |
|   hidden    | boolean |                                 是否隐藏                                 |
|    type     | string  | 表单元素类型，可选值：input/textarea/date-picker/radio-group/com-select  |
|    label    | string  |                             表单元素标题内容                             |
|    prop     | string  |                 标识表单元素在 form 表单中对应的唯一属性                 |
|  required   | boolean |                           表单元素是否不能为空                           |
|   newline   | boolean | 设置表单元素换行并且铺满整行，只有在 com-form inline 设置为 false 时有效 |
| requireType | string  |                   校验的数值类型，可选值：string/array                   |
|    width    | string  |   表单元素宽度，支持百分比和带单位数值，不指定则为整行宽度除以 rowLen    |
|  disabled   | boolean |                          是否设置为不可输入状态                          |
|   render    | boolean |                         是否以插槽实现自定义渲染                         |
|    rules    |  array  |                                 校验规则                                 |
| placeholder | string  |                   自定义 placeholder,为空时会自动生成                    |
|  compProp   | object  |                   表单元素的相关属性，会直接透传给组件                   |
|   options   |  array  |    用于如 radio-group 等的选项列表，不同类型会有不同的字段，详情如下     |
|  hideLabel  | boolean |                        是否隐藏标题,默认为 false                         |
| labelWidth  | boolean |               标题宽度，不设置时取 com-form 的 labelWidth                |

##### radio-group 类型元素 options

| 键值  |     类型     |    描述    |
| :---: | :----------: | :--------: |
| value | string/value |  选项的值  |
| label |    string    | 选项的标题 |

#### 回调事件

|  事件  |     描述     | 参数 |
| :----: | :----------: | :--: |
| submit | 点击确认按钮 |  -   |
| cancel | 点击取消按钮 |  -   |

#### 插槽

- default。renderAll 为 true 时对应的插槽。
- render-row。rowList 对象元素对应的插槽 。

  | slot-scope 属性 |  类型  |       描述       |
  | :-------------: | :----: | :--------------: |
  |      type       | string | 对象的 type 属性 |
  |    formData     | array  |     表单数据     |

- render-item。rowList 数组元素某一项自定义内容对应的插槽 。

  | slot-scope 属性 |  类型  |       描述       |
  | :-------------: | :----: | :--------------: |
  |    formData     | array  |     表单数据     |
  |      item       | object | 该项数据完整内容 |
  |      prop       | string | 数据的 prop 属性 |
  |    indexRow     | number | 数据对应的列索引 |
  |    indexItem    | number | 数据对应的行索引 |

- bottom-btn。自定义底部确认和取消按钮的插槽，非空时会替换默认的按钮。

### com-form-item

表单元素的包装层，封装了 tooltip。

|     属性      |  类型   | 默认值  |                                   描述                                   |
| :-----------: | :-----: | :-----: | :----------------------------------------------------------------------: |
|  showToolTip  |  bool   |  false  |                             是否包装 tooltip                             |
| toolTipLabel  | string  |   ''    |                               tooltip 内容                               |
|     label     | string  |   ''    |                               表单元素标题                               |
|     prop      | string  |   ''    |                               表单唯一标识                               |
|   required    | boolean |  false  |                                 是否必需                                 |
|    newline    | boolean |  false  | 设置表单元素换行并且铺满整行，只有在 com-form inline 设置为 false 时有效 |
|  labelWidth   | string  | '100px' |                             表单元素标题宽度                             |
| labelPosition | string  | 'left'  |                表单元素标题位置，可选值为 left/right/top                 |

### com-table

表格组件元素的包装层，封装顶部搜索栏、侧弹选项栏和底部分页栏。

#### 搜索栏相关的属性

|      属性       |  类型   |      默认值      |                        描述                        |
| :-------------: | :-----: | :--------------: | :------------------------------------------------: |
|   controlSize   | string  |      medium      |                按钮、输入控件的大小                |
|  showSearchBar  | boolean |       true       |                是否显示顶部的搜索栏                |
| showSearchBlock | boolean |       true       | 是否显示顶部的搜索区域(搜索类型，关键字和搜索按钮) |
|  searchFields   |  array  |        []        |             可搜索的字段，为字符串数组             |
|  searchParams   | object  | {key:'',word:''} |                      搜索参数                      |
|   showMoreBtn   | boolean |      false       |     是否显示更新选项按钮，点击显示侧弹 drawer      |
|  moreBlockProp  | object  |        {}        |              透传给侧弹 drawer 的属性              |
|    showHide     | boolean |      false       |                是否显示隐藏筛选区域                |
|     showAdd     | boolean |      false       |                  是否显示新增按钮                  |
|    autoReset    | boolean |       true       |           重置之后是否回调 getList 事件            |

#### 表格相关的属性

|      属性      |   类型   | 默认值 |                                          描述                                          |
| :------------: | :------: | :----: | :------------------------------------------------------------------------------------: |
|   tableData    |  array   |   []   |                                        表格数据                                        |
|  tableColumn   |  array   |   []   |                                       表格列字段                                       |
|  filterParams  |  object  |   {}   |                                      表格过滤参数                                      |
|   sortParams   |  object  |   {}   |                                      表格排序参数                                      |
| tableFormatter | function |  null  |          表格格式化函数，参考https://element.eleme.cn/#/zh-CN/component/table          |
|  tableFilters  | function |  null  |      表格获取过滤参数的函数，参考https://element.eleme.cn/#/zh-CN/component/table      |
|    selected    |  array   |   []   |                                      表格已选择行                                      |
|   draggable    | boolean  | false  |                                    表格行是否可拖动                                    |
|  tableRowKey   |  string  |   ''   | table 组件的 row-key 属性,对应于表格记录的唯一标识，draggable 设置为 true 之后是必需的 |
|   tableProp    |  array   |   []   |                                   table 组件其他属性                                   |

#### 分页栏相关的属性

|      属性      |  类型   | 默认值 |         描述         |
| :------------: | :-----: | :----: | :------------------: |
| showPagination | boolean | false  |    是否显示分页栏    |
|   pagination   | object  |   {}   |       分页参数       |
|  showMutilDel  | boolean | false  | 是否显示批量删除按键 |

#### 回调事件

|     事件     | 参数 |                                   描述                                   |
| :----------: | :--: | :----------------------------------------------------------------------: |
|   getList    |      | 请求列表事件，在点击搜索按钮、修改过滤、排序、分页和重置之后会回调该事件 |
|    onAdd     |      |                      在点击新增按钮之后会回调该事件                      |
|   onReset    |      |                      在点击重置按钮之后会回调该事件                      |
|  onMutilDel  |      |                  在点击批量删除按钮重置之后会回调该事件                  |
| onMoreSubmit |      |                 在点击侧弹的确认按钮重置之后会回调该事件                 |

#### 插槽

- search-front。搜索栏前置区域的插槽。
- search-before-search。搜索按钮前区域的插槽。
- search-middle。搜索栏中间区域的插槽。
- more-options。侧弹栏的插槽。
- table-custom。表格自定义列的插槽。

  | slot-scope 属性 |  类型  |         描述          |
  | :-------------: | :----: | :-------------------: |
  |       row       | array  |      表单行数据       |
  |     column      | object |      表单列信息       |
  |     colKey      | string |  表格列对应的 field   |
  |       val       | number | 表格列 field 对应的值 |
  |      index      | number |      表格行索引       |

- bottom。表格底部搜索栏中间插槽。

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