Skip to content

Commit

Permalink
Merge pull request #21 from liub1934/dev
Browse files Browse the repository at this point in the history 
merge dev to master
  • Loading branch information
@liub1934
liub1934 authored Jan 25, 2021
2 parents 75c65c5 + 781875b commit 907dccd
Show file tree
Hide file tree
Showing 31 changed files with 874 additions and 699 deletions.
76 changes: 45 additions & 31 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@ App + Nvue + H5 + 各平台小程序（快应用及 360 未测试）

## 功能

- 单选
- 多级联动，非多级联动，理论支持任意级数
- 省市区选择，基于多级联动
- 单选
- 多级联动，非多级联动，理论支持任意级数
- 省市区选择，基于多级联动
- 日期选择器，年月日时分秒可自由组合选择（引入了`dayjs`方便处理日期）
- 自定义选择器头部确定取消按钮颜色及插槽支持
- 选择器可视区自定义滚动个数
- 自定义数据字段，满足不同人的需求
- 自定义选择器样式
- formatter 格式化自定义显示
- 自定义选择器头部确定取消按钮颜色及插槽支持
- 选择器可视区自定义滚动个数
- 自定义数据字段，满足不同人的需求
- 自定义选择器样式
- formatter 格式化自定义显示
- 单选及非联动选择支持扁平化的简单数据，如下形式：

```javascript
Expand Down Expand Up @@ -321,7 +321,7 @@ data () {

### Props

#### 通用Props
#### 通用 Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :---------------------------------------- | :---------------------------------------------------------------------------------------------------- | :----------------- |
Expand Down Expand Up @@ -353,45 +353,44 @@ data () {
| press-time | `(v1.1.6 新增)`长按触发时间，单位毫秒 ms | Number | - | 500 |
| formatter | `(v1.1.7 新增)`格式化自定义选择器文字内容，`Function`类型，`return`一个字符串(日期选择器`百度、支付宝、头条小程序`不支持，其他选择器仅`app` `nvue` `h5`支持)，`item`当前项信息，`rowIndex`当前数据所在行数，`columnIndex`当前数据所在列数，写法参考[demo14](https://github.com/liub1934/uni-lb-picker/blob/master/pages/demos/demo14/demo14.vue#L206)，日期选择器可参考[demo16](https://github.com/liub1934/uni-lb-picker/blob/master/pages/demos/demo16/demo16.vue#L245) | Function({ item, rowIndex, columnIndex }) | - |

#### 单选、多级联动、非联动选择Props
#### 单选、多级联动、非联动选择 Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :---- | :-------------------------------------------------------------------- | :----- | :----- | :------------------------------------------------ |
| list | 选择器数据(v1.0.7 单选及非联动多选支持扁平数据：['选项 1', '选项 2']) | Array | - | - |
| level | 多列联动层级，仅 mode 为 multiSelector 有效 | Number | - | 1 |
| props | 自定义数据字段 | Object | - | {label:'label',value:'value',children:'children'} |

#### 日期选择Props
#### 日期选择 Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :--------- | :--------------------------------------------------------------------------- |
| display-format | 日期选择显示的颗粒格式，见下方`displayFormat、format说明`，可自由组合，如`YYYY-MM-DD`，显示的就是选择`年月日`。`重要说明：始终是以-为分隔符，始终是以-为分隔符， 始终是以-为分隔符` | String | - | YYYY-MM-DD |
| format | 选择器返回的日期格式，见下方`displayFormat、format说明`，如配置`YYYY年MM月DD日`选择器确定后返回显示的值为`2021年01月05号`或者`YYYY-MM-DD`返回的就是`2021-01-05`，可以自由组合，需要和`display-format`参数配合使用。 | String | - | YYYY-MM-DD |
| start-date | 开始日期，可精确到秒，如`2018-08-08 08:08:08` | String | - | - |
| end-date | 结束日期，可精确到秒，如`2021-08-08 08:08:08` | String | - | - |
| default-time-limit | 默认显示的日期选择范围，默认当前日期前20年和后20年，配置`start-date`或`end-date`后失效 | Number | - | 20 |
| default-time-limit | 默认显示的日期选择范围，默认当前日期前 20 年和后 20 年，配置`start-date`或`end-date`后失效 | Number | - | 20 |
| is-show-chinese | 是否显示日期选择器年月日时分秒中文文字，默认显示 | Boolean | true/false | true |
| ch-config | 显示的日期选择器年月日时分秒文字配置 | Object | - | {year: '年', month: '月', day: '日', hour: '时', minute: '分', second: '秒'} |


### displayFormat、format说明

| 标识 | 示例 | 描述 |
| :--- | :---- | :------------- |
| YY | 18 | 年，两位数 |
| YYYY | 2018 | 年，四位数 |
| M | 1-12 | 月，从1开始 |
| MM | 01-12 | 月，两位数字 |
| D | 1-31 | 日 |
| DD | 01-31 | 日，两位数 |
| H | 0-23 | 24小时 |
| HH | 00-23 | 24小时，两位数 |
| h | 1-12 | 12小时 |
| hh | 01-12 | 12小时，两位数 |
| m | 0-59 | 分钟 |
| mm | 00-59 | 分钟，两位数 |
| s | 0-59 | 秒 |
| ss | 00-59 | 秒，两位数 |
### displayFormat、format 说明

| 标识 | 示例 | 描述 |
| :--- | :---- | :-------------- |
| YY | 18 | 年，两位数 |
| YYYY | 2018 | 年，四位数 |
| M | 1-12 | 月，从 1 开始 |
| MM | 01-12 | 月，两位数字 |
| D | 1-31 | 日 |
| DD | 01-31 | 日，两位数 |
| H | 0-23 | 24 小时 |
| HH | 00-23 | 24 小时，两位数 |
| h | 1-12 | 12 小时 |
| hh | 01-12 | 12 小时，两位数 |
| m | 0-59 | 分钟 |
| mm | 00-59 | 分钟，两位数 |
| s | 0-59 | 秒 |
| ss | 00-59 | 秒，两位数 |

### 方法

Expand All @@ -401,6 +400,21 @@ data () {
| hide | 关闭选择器 | - | |
| getColumnsInfo | (v1.1.0 新增)根据 value 获取选择器信息 | 绑定值的`value` | 同`change` `confirm`回调参数，如果传入的`value`获取不到信息则只返回一个含有`dataset`的对象，具体自行打印查看 |

`getColumnsInfo`注意事项：

- 需要组件加载完成后调用才有效，即`console.log(this.$refs.picker)`打印有内容，否则会报错，可在`onReady`中进行调用。
- 如果动态设置`list`后马上调用`getColumnsInfo`会无法取到相关信息，可以加个`setTimeout`解决，如下形式：

```javascript
onReady () {
this.list = [{ label: '测试', value: 1 }] // 动态设置一个list
setTimeout(() => {
const info = that.$refs.picker.getColumnsInfo(xx)
console.log(info)
}, 0)
}
```

### Events

| 事件名称 | 说明 | 回调参数 |
Expand Down
Loading

0 comments on commit 907dccd

Please sign in to comment.