/xp-picker

A time-selector component ,based on Uniapp

Primary LanguageVue

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组件搭建的界面，因此界面可以根据自己的界面需求添砖加瓦