uniapp自定义封装只有时分秒的组件，时分秒范围选择

 说实话，uniapp和uview的关于只有时分秒的组件实在是不行。全是日历，但是实际根本就不需要日历这玩意。百度了下，终于看到了一个只有时分秒的组件。原地址：原地址，如若侵犯请联系我删除

<template><view class="hms"><!-- //显示时间的地方，样式可以自行修改 --><view class="hmsText" @click="show">{{ hmsVal }}</view><!-- //弹出选择时间的弹框 --><uni-popup ref="popup" type="bottom" background-color="#fff"><view class="hms_content"><view class="hmsBtn"><view class="close" @click="close">取消</view><view class="complete" @click="completeFun">完成</view></view><picker-view indicator-style="100rpx" @change="bindChange" class="picker-view" :value="pickerArrIndex"><picker-view-column><view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view></picker-view-column></picker-view></view></uni-popup></view>
</template>
<script>
export default {props: {//父组件传过来的初始值，不是必须传，不传默认值为00:00:00hmsval: {type: String,default() {return '00:00:00';}}},data() {return {hours: [],minute: [],second: [],h: '00',m: '00',s: '00',hmsVal: '00:00:00',//页面使用的显示值pickerArrIndex: [0, 0, 0]//picker-view 显示默认};},watch: {//监听父组件传过来的从新赋值给新的变量显示hmsval(newval, oldval) {this.hmsVal = newval;}},created() {this.hoursFun();this.minuteFun();this.secondFun();},methods: {// 时hoursFun() {for (var i = 0; i <= 23; i++) {if (i < 10) {i = '0' + i;this.hours.push(i);} else {this.hours.push(i);}}},// 分minuteFun() {for (var i = 0; i <= 59; i++) {if (i < 10) {i = '0' + i;this.minute.push(i);} else {this.minute.push(i);}}},// 秒secondFun() {for (var i = 0; i <= 59; i++) {if (i < 10) {i = '0' + i;this.second.push(i);} else {this.second.push(i);}}},//picker值改变的事件bindChange(e) {const val = e.detail.value;this.h = this.hours[val[0]] ? this.hours[val[0]] : this.h;this.m = this.minute[val[1]] ? this.minute[val[1]] : this.m;this.s = this.second[val[2]] ? this.second[val[2]] : this.s;},show() {// picker-view 显示默认值var hmsArr = this.hmsVal.split(':');var hindex = this.hours.findIndex(item => item == hmsArr[0]);var mindex = this.minute.findIndex(item => item == hmsArr[1]);var sindex = this.second.findIndex(item => item == hmsArr[2]);this.pickerArrIndex = [hindex, mindex, sindex];this.$refs.popup.open();},// 关闭popupclose() {this.$refs.popup.close();},//点击完成completeFun() {//点击完成赋值this.hmsVal = `${this.h}:${this.m}:${this.s}`;//新的值传给父组件this.$emit('complete', this.hmsVal)this.$refs.popup.close();}}
};</script>
<style lang='scss' scoped>
.picker-view {height: 400rpx;background: #fff;
}
.item {line-height: 100rpx;text-align: center;
}
.hmsText {width: 160rpx;height: 50rpx;line-height: 50rpx;border: 1px solid #ddd;text-align: center;background: #fff;border-radius: 10rpx;margin-left: 10rpx;
}
.hmsBtn {display: flex;align-items: center;background: #fff;height: 80rpx;line-height: 80rpx;justify-content: space-between;padding: 0 20rpx;border-bottom: 1px solid #ddd;.complete {color: #0055ff;}
}
</style>

父组件使用：

<uniHms hmsval="21:20:00" @complete="complete" />

然后实际效果是：

兄弟搞得不错！可惜了我需要一个时间段！！！ 但是这是个很好的例子。于是按照这个修改加了一个时间段的时分秒选择器。（这里我试了其他样式，终究选了一个自己满意的时间范围选择格式，如果需要可以自行修改样式，大致逻辑方法是不变的）

先上代码：

<template><view class="hms"><!-- //显示时间的地方，样式可以自行修改 --><view class="hmsText" @click="show">{{ hmsVal_start + '-' + hmsVal_end }}</view><!-- //弹出选择时间的弹框 --><uni-popup ref="popup" type="bottom" background-color="#fff"><view class="hms_content"><view class="hmsBtn"><view class="close" @click="close">取消</view><view class="tip">{{ hmsVal_start + '至' + hmsVal_end }}</view><view class="complete" @click="completeFun">完成</view></view><view class="picker"><picker-view indicator-style="100rpx" @change="bindChange" class="picker-view" :value="pickerArrIndexLeft"><picker-view-column><view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view></picker-view-column></picker-view><view class="line">-</view><picker-view indicator-style="100rpx" @change="bindChange2" class="picker-view" :value="pickerArrIndexRight"><picker-view-column><view class="item" v-for="(item, index) in hours" :key="index">{{ item }}时</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in minute" :key="index">{{ item }}分</view></picker-view-column><picker-view-column><view class="item" v-for="(item, index) in second" :key="index">{{ item }}秒</view></picker-view-column></picker-view></view></view></uni-popup></view>
</template>
<script>
export default {props: {//父组件传过来的初始值，不是必须传，不传默认值为00:00:00hmsval: {type: String,default() {return '00:00:00-00:00:00';}}},data() {return {hours: [],minute: [],second: [],/* 开始时间 */h: '00',m: '00',s: '00',/* 结束时间 */h2: '00',m2: '00',s2: '00',hmsVal_start: '00:00:00',//页面使用的显示值hmsVal_end: '00:00:00',//页面使用的显示值pickerArrIndexLeft: [0, 0, 0],//picker-view 显示默认pickerArrIndexRight: [0, 0, 0],//picker-view 显示默认};},watch: {//监听父组件传过来的从新赋值给新的变量显示hmsval: {immediate: true,handler(newval) {console.log('newval :>> ', newval);if (newval != '00:00:00-00:00:00') {this.hmsVal_start = newval.split('-')[0]this.hmsVal_end = newval.split('-')[1]}}}},created() {this.hoursFun();this.minuteFun();this.secondFun();},methods: {// 时hoursFun() {for (var i = 0; i <= 23; i++) {if (i < 10) {i = '0' + i;this.hours.push(i);} else {this.hours.push(i);}}},// 分minuteFun() {for (var i = 0; i <= 59; i++) {if (i < 10) {i = '0' + i;this.minute.push(i);} else {this.minute.push(i);}}},// 秒secondFun() {for (var i = 0; i <= 59; i++) {if (i < 10) {i = '0' + i;this.second.push(i);} else {this.second.push(i);}}},//picker值改变的事件bindChange(e) {const val = e.detail.value;this.h = this.hours[val[0]] ? this.hours[val[0]] : this.h;this.m = this.minute[val[1]] ? this.minute[val[1]] : this.m;this.s = this.second[val[2]] ? this.second[val[2]] : this.s;this.hmsVal_start = this.h + ':' + this.m + ':' + this.s},//picker值改变的事件bindChange2(e) {const val = e.detail.value;this.h2 = this.hours[val[0]] ? this.hours[val[0]] : this.h2;this.m2 = this.minute[val[1]] ? this.minute[val[1]] : this.m2;this.s2 = this.second[val[2]] ? this.second[val[2]] : this.s2;this.hmsVal_end = this.h2 + ':' + this.m2 + ':' + this.s2},show() {// picker-view 显示默认值var hmsArr = this.hmsVal_start.split(':');var hmsArr2 = this.hmsVal_end.split(':');var hindex = this.hours.findIndex(item => item == hmsArr[0]);var mindex = this.minute.findIndex(item => item == hmsArr[1]);var sindex = this.second.findIndex(item => item == hmsArr[2]);var hindex2 = this.hours.findIndex(item => item == hmsArr2[0]);var mindex2 = this.minute.findIndex(item => item == hmsArr2[1]);var sindex2 = this.second.findIndex(item => item == hmsArr2[2]);this.pickerArrIndexLeft = [hindex, mindex, sindex];this.pickerArrIndexRight = [hindex2, mindex2, sindex2];this.$refs.popup.open();},// 关闭popupclose() {this.$refs.popup.close();},//点击完成completeFun() {//新的值传给父组件this.$emit('complete', this.hmsVal_start + '-' + this.hmsVal_end)this.$refs.popup.close();}}
};</script>
<style lang='scss' scoped>
.picker-view {height: 400rpx;background: #fff;
}
.item {line-height: 100rpx;text-align: center;
}
.hmsText {line-height: 50rpx;text-align: center;background: #fff;margin-left: 10rpx;
}
.hmsBtn {display: flex;align-items: center;background: #fff;height: 80rpx;justify-content: space-between;padding: 0 20rpx;border-bottom: 1px solid #ddd;.complete {color: #0055ff;}.tip {color: #939393;}
}
.picker {display: flex;align-items: center;.line {font-weight: bolder;position: relative;top: 10rpx;}
}
/deep/.picker-view {width: 50%;
}
</style>

父组件：

<uniHms hmsval="21:20:00-23:56:00" @complete="complete" />

格式是时间-时间。

然后页面显示效果图：

 欧耶，完成！！！需要的和不需要的赶紧收藏起来，只要干这行的说不定哪天就需要用到呢！！！！

另外补充一句，uniapp组件文档很鸡肋哎。。。