自定义pickerView

<template> <uni-popup ref="msPicker" type="bottom"> <picker-view style="width: 100%;height: 300rpx;background-color: #FFFFFF;" @change="valueRangeChange"> <picker-view-column> <view style="text-align: center;" v-for="item in valueRangeList">{{item.name}}</view> </picker-view-column> </picker-view> <view> <view class="btn cancel" :style="{'color': cancelTextColor}" @click="handleCancel">{{cancelText}}</view> <view class="btn confirm" :style="{'color': confirmTextColor}" @click="handleConfirm">{{confirmText}}</view> </view> </uni-popup> </template> <script> export default { props: { // 取消按钮文字 cancelText: { type: String, default: '取消' }, // 确定按钮文字 confirmText: { type: String, default: '确定' }, // 取消按钮文字颜色 cancelTextColor: { type: String, default: '#666' }, // 确定按钮文字颜色 confirmTextColor: { type: String, default: '#5999FF' }, valueRangeList: { type: Array, default: [] } }, data() { return { value: this.valueRangeList[0] } }, methods: { valueRangeChange(e) { this.value = this.valueRangeList[e.detail.value].value; console.log("===valueRangeChange===="+this.value) }, showModal() { this.$refs['msPicker'].open(); }, handleCancel() { this.$refs['msPicker'].close(); this.$emit('onClickCancel', 'cancel') }, handleConfirm() { this.$refs['msPicker'].close(); this.$emit('onClickConfirm', this.value) } } } </script> <style scoped> .btn { width: 50%; height: 90rpx; text-align: center; line-height: 90rpx; font-size: 32rpx; float: left; background-color: #FFFFFF; border-top: 1rpx solid #ddd; } </style> this.$refs['msPicker'].showModal(); pickConfirm(value) { console.log('===value==' + value); }