1、v-model封裝picker組件

（1）封裝組件myPicker.vue

<template>
	<view class="my-picker">
		<picker @change="handleChange" :range="options" :range-key="rangeKey" :value="index">
			{{ currentValue || placeholoder }}
		</picker>
	</view>
</template>

<script>
	export default {
		name: "myPicker",
		props: {
			value: String | Number,
			options: Array,
			rangeKey: {
				type: String,
				default: "label"
			},
			rangeValue: {
				type: String,
				default: "value"
			},
			placeholoder: {
				type: String,
				default: "請選擇",
			}
		},
		data() {
			return {
				index: -1
			}
		},
		computed: {
			currentValue() {
				return this.index == -1 ? "" : this.options[this.index][this.rangeKey]
			}
		},
		watch: {
			value(val) {
				this.index = this.options.findIndex(item => item[this.rangeValue] == val);
			}
		},
		methods: {
			handleChange(e) {
				this.index = e.detail.value;
				let currentValue = this.index == -1 ? "" : this.options[this.index][this.rangeValue];
				this.$emit("input", currentValue);
                this.$emit("change", currentValue);
			}
		}
	}
</script>

（2）組件調(diào)用

<template>
	<view class="container">
        <MyPicker v-model="reason" :options="reasonOptions" range-key="name"></MyPicker>
    </view>
</template>

<script>
	import MyPicker from './components/myPicker.vue' 
	export default {
		name: 'order',
		data() {
			return {
				reason: "",
				reasonOptions: [
                    { name: "辦公", value: "1" },
                    { name: "洽談", value: "2" },
                    { name: "會議", value: "3" }
                ]
			}
		},
		components: {
			MyPicker
		}
	}
</script>

（3）屬性說明

2、自定義picker樣式

????????小程序里面的picker組件是是沒法修改樣式的，如果想要自定義樣式需要使用picker-view，如下面所示，封裝一個自定義樣式的picker組件。

（1）封裝組件myPickerView.vue

<template>
	<view class="my-picker-view" v-show="value">
		<uni-transition mode-class="slide-bottom" :show="value"
			:styles="{'width':'100%','height':'100vh','position':'fixed','bottom':'0'}">
			<view class="empty-box" @click="handleCancel"></view>
			<view class="picker-box">
				<view class="picker-top">
					<view class="cancel" @click="handleCancel">取消</view>
					<view class="title">{{ title }}</view>
					<view class="submit" @click="handleSubmit">確定</view>
				</view>
				<picker-view :value="pickerValue" indicator-class="indicator" @change="handleChange" 
					@pickstart="pickstart" @pickend="pickend" :immediate-change="true">
					<picker-view-column class="picker-content">
						<view class="picker-item" v-for="(item, index) in options" :key="index">{{ item[rangeKey] }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	export default {
		name: "myPickerView",
		data() {
			return {
				pickerValue: [0],
				isScroll: false
			}
		},
		props: {
			value: Boolean,
			options: Array,
			title: {
				type: String,
				default: ""
			},
			rangeKey: {
				type: String,
				default: "label"
			}
		},
		methods: {
			// 確定
			handleSubmit() {
				if(!this.isScroll) {
					this.$emit('input', false);
					this.$emit("change", this.options[this.pickerValue[0]]);
				}
			},
			// 取消
			handleCancel() {
				this.isScroll = false;
				this.$emit('input', false);
			},
			handleChange(e) {
				this.pickerValue = e.detail.value;
			},
			pickstart(e) {
				this.isScroll = true;
			},
			pickend(e) {
				this.isScroll = false;
			}
		}
	}
</script>

<style scoped lang='less'>
	.my-picker-view {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 100;
		bottom: 0;
		background-color: rgba(0,0,0,0.5);
		.empty-box {
			width: 100%;
			height: 50%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.picker-box {
			width: 100%;
			height: 50%;
			position: absolute;
			bottom: 0;
			.picker-top {
				height: 120rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 40rpx 40rpx 0 0;
				.cancel, .submit {
					width: 132rpx;
					font-size: 28rpx;
					color: #040405;
					text-align: center;
				}
				.submit {
					color: #3973B5;
				}
				.title {
					width: calc(~"100% - 300rpx");
					text-align: center;
					color: #040405;
					font-weight: bold;
					font-size: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			/deep/ picker-view {
				background-color: #FFFFFF;
				height: calc(~"100% - 120rpx");
				.picker-item  {
					height: 96rpx !important;
					line-height: 96rpx !important;
					text-align: center;
				} 
				.indicator {
					height: 96rpx;
				}
			}
		}
	}
</style>

（2）組件調(diào)用

<template>
	<view class="container">
        <view class="required-item">
			<view class="lt">
				<text class="icon">*</text>作業(yè)園區(qū)
			</view>
			<view class="rt">
				<view class="rt-text" @click="isShowPark = true">{{ form.parkLabel || '請選擇' }}</view>
			    <uni-icons type="right"></uni-icons>
			</view>
		</view>
        <MyPickerView v-model="isShowPark" :options="cityOptions" range-key="name" title="籍貫" @change="handleChangePark"></MyPickerView>
    </view>
</template>
 
<script>
	import MyPickerView from './components/myPickerView.vue'
	export default {
		name: 'vehicleAppoint',
		data() {
			return {
				form: {
				    parkLabel: "",
				    parkValue: ""
                },
				cityOptions: [
					{ name: '北京', value: "beijing" },
					{ name: '上海', value: "shanghai" },
					{ name: '廣州', value: "guangzhou" },
					{ name: '深圳', value: "shenzhen" },
					{ name: '成都', value: "chengdu" },
					{ name: '武漢', value: "wuhan" },
					{ name: '重慶', value: "chongqing" },
					{ name: '貴州', value: "guizhou" },
                ],
				isShowPark: false
			}
		},
		components: {
			MyPickerView 
		},
        methods: {
			handleChangePark(data) {
				this.form.parkLabel = data.name;
				this.form.parkValue = data.value;
			}
        }
	}
</script>

（3）屬性說明文章來源地址http://www.zghlxwxcb.cn/news/detail-493166.html

到了這里，關(guān)于uni-app 使用v-model封裝picker組件和自定義樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！