uniapp修改picker-view样式

解决问题：

1.选中文案样式，比如字体颜色

2.修改分割线颜色

3.多列时，修改两边间距让其平分

展示效果：

代码如下

<template>
	<u-popup :show="showPicker" :safeAreaInsetBottom="false" @close="close">
		<view class="title-box">
			<view class="title">{{title}}</view>
			<text class="iconfont icon-guanbidankuang" @click="close"></text>
		</view>
		<picker-view class="picker-view" indicator-class="picker-selected" immediate-change :value="innerIndex"
			@change="changeHandler">
			<picker-view-column>
				<view class="item" :class="columns2.length==0||columns3.length==0?'first-item':'col1'"
					v-for="(item, index) in columns" :key="index">
					<!-- 设置选中文字样式class -->
					<view :class="columns[innerIndex[0]].text==item.text?'selected-text':''">{{item.text}}</view>
				</view>
			</picker-view-column>
			<picker-view-column v-if="columns2&&columns2.length>0">
				<view class="item" v-for="(item, index) in columns2" :key="index">
					<view :class="columns2[innerIndex[1]].text==item.text?'selected-text':''">{{item.text}}</view>
				</view>
			</picker-view-column>
			<picker-view-column v-if="columns3&&columns3.length>0">
				<view class="item" v-for="(item, index) in columns3" :key="index">
					<view :class="columns3[innerIndex[2]].text==item.text?'selected-text':''">{{item.text}}</view>
				</view>
			</picker-view-column>
		</picker-view>
		<view class="btn-box">
			<view class="btn" @click="close('submit')">确定</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				innerIndex: [0, 0, 0],
				showPicker: false,
				currentData: [],
				previousValue: [0, 0, 0] // 用于保存之前的选中值
			}
		},
		props: {
			columns: {
				type: Array,
				default: []
			},
			columns2: {
				type: Array,
				default: []
			},
			columns3: {
				type: Array,
				default: []
			},
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '请选择'
			},
			selectIndex: {
				type: Array,
				default: []
			}
		},
		watch: {
			show: function() {
				this.showPicker = this.show
			},
			selectIndex() {
				this.innerIndex = this.selectIndex
			}
		},
		mounted() {
			if (this.selectIndex && this.selectIndex.length > 0) {
				this.innerIndex = this.selectIndex
			}
			this.currentData = [this.columns[this.innerIndex[0]], this.columns2.length > 0 ? this.columns2[this.innerIndex[
					1]] : {}, this.columns3.length >
				0 ? this.columns3[this.innerIndex[2]] : {}
			]
			// console.log(this.currentData);
		},
		methods: {
			changeHandler(e) {
				const that = this
				uni.vibrateShort({
					complete() {
						console.log(e);
						that.innerIndex = e.detail.value
						const previousValue = that.previousValue;
						// 判断哪一列发生了变化
						for (let i = 0; i < that.innerIndex.length; i++) {
							if (that.innerIndex[i] !== previousValue[i]) {
								// console.log(`第 ${i + 1} 列发生了变化`);
								that.$emit('changeIndex', i + 1)
								break;
							}
						}
						that.previousValue = that.innerIndex
						that.currentData = [
							that.columns[e.detail.value[0]], that.columns2.length > 0 ? that.columns2[e.detail
								.value[1]] : {},
							that.columns3.length > 0 ? that.columns3[e.detail.value[2]] : {}
						]
						// that.currentData = that.columns[e.detail.value[0]]
					}
				})
			},
			close(type) {
				// this.showPicker = false
				if (type === 'submit') {
					console.log(this.currentData);
					this.$emit('submit', this.currentData)
				} else {
					this.$emit('close', true)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		padding: 28rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.title {
			font-weight: 500;
			font-size: 32rpx;
		}

		.icon-guanbidankuang {
			font-size: 60rpx;
			position: absolute;
			right: 40rpx;
		}
	}

	.picker-view {
		height: 480rpx;
		margin-bottom: 34rpx;
		margin-top: 48rpx;
		padding: 0 60rpx;

		.item {
			// line-height: 96rpx;
			// text-align: center;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		.first-item {
			justify-content: center;
		}

		.col1 {
			justify-content: flex-start;
		}
	}

	.btn-box {
		padding: 12rpx 24rpx;
		z-index: 9;
		box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.1);
		padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);

		.btn {
			border-radius: 20rpx;
			background: $primary-color;
			height: 74rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 0.84rpx;
			font-weight: 600;
		}
	}
</style>
<style>
	.picker-selected {
		height: 96rpx;
	}

	.picker-selected::before {
		content: '';
		position: absolute;
		top: 0;
		border: 2rpx solid #FAFAFA;
	}

	.selected-text {
		font-weight: 500;
	}

	.picker-selected::after {
		content: '';
		position: absolute;
		bottom: 0;
		border: 2rpx solid #FAFAFA;
	}
</style>

引用，省略数据填充

<template>
    <selection-picker v-if="columnsTime.length>0" :show="showTime" :columns="columnsTime" :selectIndex="selectIndex" :columns2="columnsTime2" :columns3="columnsTime3" title="请选择出发时间" @close="showTime=false" @submit="getTime"></selection-picker>
</template>

<button @click="showTime=true">打开</button>


<script>
    export default {
		data() {
			return {
				showTime: false
            }
        }
    }
</script>