xp-picker
- 上一代e-picker-plus的优化版本，适配任何可选列的配置，包括但不限于’y-m-d h:i’、'm-d’等，详情请看文档
- 功能强、通用性强、多端兼容。兼容h5、微信小程序、QQ小程序(其他平台小程序未作测试)与app
一、使用示例
示例1：函数式打开picker，通过 this.$refs[ref].show()
<template>
<view>
<xp-picker ref="picker" @confirm="confirm" />
<view @tap="show">开启</view>
</view>
</template>
<script>
export default {
methods: {
show() {
this.$refs.picker.show()
},
confirm(e) {
console.log(e)
}
}
}
</script>
示例2：xp-picker包含一个默认插槽，点击内容直接打开picker弹窗
<template>
<view>
<xp-picker @confirm="confirm">打开</xp-picker>
</view>
</template>
<script>
export default {
methods: {
confirm(e) {
console.log(e)
}
}
}
</script>
二、属性介绍
| 字段 |
类型 |
必填 |
默认值 |
描述 |
| mode |
String |
否 |
ymd |
见下方mode 详细介绍 |
| height |
Number |
否 |
35 |
选择器的高度，单位vh |
| animation |
Boolean |
否 |
true |
打开和关闭是否使用动画效果 |
| value |
String |
否 |
当前时间 |
打开选择器时默认选中的时间,详细见下方使用方式 |
| year-range |
Array |
否 |
[2016,null] |
数组第一项代表开始年份(配置为null将使用默认2016)，第二项代表结束年份(配置null将使用本年)，配置示例:[2010,null] |
| history |
Boolean |
否 |
false |
每次打开picker时，是否保持用户最后一次选择的历史时间，若为fasle,则每次打开显示当前时间 |
| action-position |
String |
否 |
top |
可选 bottom,设置"取消"和"确定"按钮的位置 |
startRule |
|
|
|
v2.0已移除 |
endRule |
|
|
|
v2.0已移除 |
start |
|
|
|
v1.2已移除 |
end |
|
|
|
v1.2已移除 |
errorMsg |
|
|
|
v1.2已移除 |
1、mode的使用(y年；m月；d日；h时；i分；s秒)
| 可选类型 |
描述 |
| y |
picker将只显示 '年’一列 |
| ym |
picker将只显示 '年月’两列 |
| ymd |
picker将只显示 '年月日’两列 |
| ymdh |
picker将只显示 '年月日时’四列 |
| ymdhi |
picker将显示 '年月日时分’五列 |
| ymdhis |
picker将显示 '年月日时分秒’六列 |
| m |
略…… |
| d |
略…… |
| h |
略…… |
| i |
略…… |
| s |
略…… |
| md |
略…… |
| hi |
略…… |
| is |
略…… |
| his |
略…… |
| mdh |
略…… |
| mdhi |
略…… |
| mdhis |
略…… |
未出现在表格中的配置代表不支持。但是xp-picker可以适配任何自定义列，比如：其中’dh’未预定义，因此只需在源码加一行dh的预定义即可(util.js/getLocalTime)，不会联系作者，热心答复
2、value的使用
此选项用于自定义picker打开时的显示时间，同样需要与mode对应
| mode |
value格式（必须） |
| ymd |
yyyy-MM-dd |
| his |
HH:mm:ss |
| …… |
…… |
三、事件
| 字段 |
描述 |
| confirm |
点击确定按钮的响应事件 |
| cancel |
关闭picker的响应事件 |
confirm 事件返回属性介绍
| 属性 |
类型 |
描述 |
isOverTime |
|
v2.0.0已移除 |
| value |
String |
选择的时间 例如:‘2020-12-06’ |
resultArr |
|
v2.1.0已移除 |
| timestamp |
BigInt |
返回的时间戳，支持理论可转换的时间 |
四、插槽
可使用此方式打开picker弹窗
五、讨论
- 若你有需求是：只要显示 ‘月’和’日’ 即 mode=‘md’，没有 ‘年’ 这一列。而’日期’这一列考虑平闰年，也由年份决定，因此这类mode的默认年份是本年，
picker智能的解决了平闰年的问题；以此类推，没有 年和月 ，picker将默认本年本月
- 源码采用原生picker-view组件搭建的界面，因此界面可以根据自己的界面需求添砖加瓦