uniapp如何自己实现写一个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)...

点击查看剩余70%