# yer-components

**Repository Path**: yerxichen/yer-components

## Basic Information

- **Project Name**: yer-components
- **Description**: 基于uniapp的封装组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-12
- **Last Updated**: 2024-03-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# yer-components组件说明文档

## 安装

```
npm install yer-components
```

## 说明

该组件依托uview和mescroll才能正常使用。

### yer-form

根据动态配置进行表单渲染

#### Props

| 参数             | 说明                                                          | 类型           | 默认值 | 可选值                                                        |
| ---------------- | ------------------------------------------------------------- | -------------- | ------ | ------------------------------------------------------------- |
| v-model          | 表单双向绑定数据                                              |                |        |                                                               |
| config           | 动态表单配置信息                                              | Array          | -      | 见下方config说明                                              |
| default-value    | 默认值                                                        | Object         | -      | -                                                             |
| label-width      | 左侧提示文字宽度，会覆盖config里配置的值                      | Number\|String | 0      |                                                               |
| label-name       | 自定义 `list`数据的 `label`属性名，会覆盖config里配置的值 | String         | label  |                                                               |
| value-name       | 自定义 `list`数据的 `value`属性名，会覆盖config里配置的值 | String         | value  |                                                               |
| action           | 图片上传地址                                                  | String         | -      |                                                               |
| header           | 图片上传的头部信息                                            | Object         | -      |                                                               |
| upload-form-data | 图片上传额外的formData                                        | Object         | -      |                                                               |
| value-type       | 图片返回类型                                                  | String         | array  | array(base64模式用数组类型，否则会报错)，string（用逗号分割） |
| max-count        | 图片上传数量                                                  | Number         | 9      | 最大支持9张                                                   |
| eval-path        | 图片返回接口的对象计算                                        | String         | data   | 返回结果是对象，参考类似这种写法res.data.url                  |
| mode             | 图片上传的模式，选择filestream的话必须配置action              | String         | base64 | filestream(文件流)，base64（带头部value-type选array）         |

#### config配置说明

| 参数       | 说明                                                                                  | 类型    | 默认值     | 可选值                |
| ---------- | ------------------------------------------------------------------------------------- | ------- | ---------- | --------------------- |
| type       | 表单类型                                                                              | String  | input      | 见下方type说明        |
| key        | 必填，数据项列名                                                                      | String  | -          |                       |
| label      | 必填，左侧提示文字                                                                    | String  | -          |                       |
| required   | 最左侧的*号                                                                           | Boolean | false      |                       |
| rules      | 表单验证规则                                                                          | Array   | -          | 详见uview表单验证规则 |
| list       | 代码项list，radio,checkox，select，side-select，side-select-mutil等需要字典的组件使用 | Array   | -          |                       |
| label-name | 自定义 `list`数据的 `label`属性名                                                 | String  | label      |                       |
| value-name | 自定义 `list`数据的 `value`属性名                                                 | String  | value      |                       |
| max-count  | 图片上传可选的最大数量                                                                | Number  | -          | image-upload专用      |
| action     | 图片上传的地址，后端配合                                                              |         |            |                       |
| mode       | 图片上传的模式，选择filestream的话必须配置action                                      | String  | filestream | filestream/base64     |

##### type说明

| 名称              | 说明                    |
| ----------------- | ----------------------- |
| input             | 文本输入框              |
| number            | 数字                    |
| textarea          | 文本域                  |
| select            | 底部弹框选择器（单选）  |
| side-select       | 侧边弹框选择器（单选）  |
| side-select-mutil | 侧边弹框选择器（多选）  |
| car-plate         | 车牌号                  |
| idcard            | 身份证                  |
| radio             | 单选                    |
| checkbox          | 多选                    |
| image-upload      | 图片上传                |
| date              | 日期yyyy-MM-dd          |
| date-hour         | 日期yyyy-MM-dd HH       |
| date-minute       | 日期yyyy-MM-dd HH:mm    |
| date-second       | 日期yyyy-MM-dd HH:mm:ss |
| time-minute       | 时间HH:mm               |
| time-second       | 时间HH:mm:ss            |

```json
config: [{
    type: 'input',
    key: 'xm', //
    label: '姓名',
    required: true, // 只是展示*号  必填验证需手写
    rules: [{ // 表单验证规则 同uview表单验证规则 
        required: true,
        message: '请输入姓名',
        trigger: 'blur,change' // 可以单个或者同时写两个触发验证方式
    }],
}, {
    type: 'idcard',
    key: 'gmsfhm', //
    label: '身份证',
    required: true, // 
    placeholder: '请填写身份证',
}, {
    type: 'select',
    key: 'xb', //
    label: '性别',
    labelName:'zdmc', // 默认label  可自定义
    valueName:'zddm', // 默认value  可自定义
    list: [{
        zdmc: '男',
        zddm: '1'
    }, {
        zdmc: '女',
        zddm: '2'
    }, {
        zdmc: '不明',
        zddm: '0'
    }],
    required: true,
},{
    type: 'date',
    key: 'rq', //
    label: '日期',
}]
```

### yer-list-view

每次列表数据更新都要执行一次endBySize，用于判断是否存在下一页数据。

#### Props

| 参数   | 说明                                             | 类型    | 默认值 | 可选值 |
| ------ | ------------------------------------------------ | ------- | ------ | ------ |
| top    | 距离顶部距离                                     | String  | 0rpx   | -      |
| bottom | 距离底部距离                                     | String  | 0rpx   | -      |
| fixed  | 定位方式                                         | Boolean | true   | false  |
| height | 列表高度，如果设置了height，则fixed属性强制false | String  | -      | -      |

#### Event

| 事件名   | 说明         | 回调参数                                                     | 版本 |
| -------- | ------------ | ------------------------------------------------------------ | ---- |
| upCall   | 上拉加载等多 | 上拉加载的回调 (返回mescroll实例对象)，mescroll.num当前页码，mescroll.size每页条数 | -    |
| downCall | 下拉刷新     | 下拉刷新的回调 (返回mescroll实例对象)                        | -    |

#### Methods

###### 方法用ref调用

| 方法名        | 说明                                                                              | 参数                    | 版本 |
| ------------- | --------------------------------------------------------------------------------- | ----------------------- | ---- |
| endBySize     | 每次列表数据更新都要执行一次，curPageLen是表示本次返回的数据，totalSize表示总数据 | [curPageLen, totalSize] | -    |
| resetUpScroll | 刷新列表数据                                                                      | -                       | -    |

### yer-base-page

带头部导航和底部按钮的base页面

#### Props

| 参数              | 说明                 | 类型    | 默认值  | 可选值 |
| ----------------- | -------------------- | ------- | ------- | ------ |
| show-navbar       | 展示导航栏           | Boolean | false   | true   |
| navbar-background | 导航栏背景色         | String  | #FFFFFF | -      |
| nav-title-color   | 导航标题颜色         | String  | #606266 | -      |
| title             | 导航标题             | String  | -       | -      |
| nav-height        | 导航栏高度，单位是px | Number  | 44      | -      |
| bottom-text       | 底部按钮文字         | String  | 提交    | -      |
| is-bottom         | 展示底部按钮         | Boolean | false   | true   |

#### Event

| 事件名 | 说明             | 回调参数 | 版本 |
| ------ | ---------------- | -------- | ---- |
| commit | 底部按钮点击事件 | -        | -    |

#### Solt

| 名称 | 说明         |
| ---- | ------------ |
| -    | 中间主体部分 |