uniapp中利用表单组件picker-view 封装时，分，秒选择组件

开发微信小程序过程中要用道精确的秒的时间组件，uview组件中没有合适的。

一 、HTML部分

<view class="hms">
		<!-- //弹出选择时间的弹框 -->
		<u-popup ref="popup" :show="show" type="bottom" background-color="#fff">
			<view class="hms_content">
				<view class="hmsBtn">
					<view class="close" @click="closed">取消</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>
		</u-popup>
	</view>

二、JS部分

<script>
	export default {
		props: {
			//父组件传过来的初始值，不是必须传，不传默认值为00:00:00
			hmsval: {
				type: String,
				default () {
					return '00:00:00';
				}
			},
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				shows: false,
				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;
			},
			// 关闭popup
			closed() {
				this.$emit('close')
			},
			//点击完成
			completeFun() {
				//点击完成赋值
				this.hmsVal = `${this.h}:${this.m}:${this.s}`;
				//新的值传给父组件
				this.$emit('confirm', this.hmsVal)
				this.$refs.popup.close();
			}
		}
	};
</script>

三、css部分 

<style lang="scss" scoped>
	.picker-view {
		height: 420rpx;
		background: #fff;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.hmsText {
		margin-left: 10rpx;
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 1px solid #ddd;
		text-align: center;
		background: #fff;
		border-radius: 10rpx;
	}

	.hmsBtn {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		align-items: center;
		background: #fff;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;

		.close {
			color: #909193;
		}

		.complete {
			color: #3c9cff;
		}
	}
</style>

转载：uniapp中picker-view 封装时，分，秒选择组件_Lzs、uncle的博客-CSDN博客