ProAdvanced/components/slambb-picker/slambb-picker.vue

<template>
	<view>
		<view class="padding-sm">
			<view class=" text-center text-black text-bold padding-bottom-sm margin-sm">{{currentPicker.pickerTitle}}</view>
			<view v-if="currentPicker.showInput" class="flex justify-center">
				<input class="picker-input" maxlength="4" @input="onKeyInput" placeholder-style="font-size:10px;" placeholder="直接输入" />
				<view class="make-text-bPurple">{{currentPicker.pickerUnit}}</view>
			</view>
			<pickerItem v-if="currentPicker.pickerType=='doubleItem'" :itemObj="currentPicker" :bDouble="true" @bindChangeItem="bindChange"
			 @touchstart="onStart">
			</pickerItem>
			<pickerItem v-else-if="currentPicker.pickerType=='singleItem'" :itemObj="currentPicker" :bDouble="false"
			 @bindChangeItem="bindChange" @touchstart="onStart">
			</pickerItem>
			<pickerCity v-else-if="currentPicker.pickerType == 'city'" :itemObj="currentPicker" @bindChangeCity="bindChange"></pickerCity>
			<pickerDateItem v-else @bindChangeDate="bindChange" @touchstart="onStart"></pickerDateItem>
		</view>
		<view class="flex justify-center cu-bar margin-bottom">
			<view class="action  left-button " :class="bRolling?'bDisable':''" @tap="onConfirm">确定</view>
			<view class="action  right-button" @tap="onCancel">取消</view>
		</view>
	</view>
</template>

<script>
	import pickerItem from "@/components/slambb-picker/slambb-picker-item.vue";
	import pickerDateItem from "@/components/slambb-picker/slambb-picker-date.vue";
	import pickerCity from "@/components/slambb-picker/slambb-picker-city.vue";

	export default {
		components: {
			pickerItem,
			pickerDateItem,
			pickerCity
		},
		props: {
			//对象
			pickerObj: Object,
			pickerTitle: {
				type: String,
				default: ""
			},
			pickerType: {
				type: String,
				default: ""
			},
			pickerLeftList: Array,
			pickerRightList: Array,
			pickerUnit: {
				type: String,
				default: ""
			},
		},
		data() {
			return {
				confirmValue: 0,
				valueIndex: 0,
				currentPicker: this.pickerObj,
				//是否正在滚动
				bRolling: false
			}
		},
		watch: {
			pickerObj(val) {
				// 重新赋值
				console.log('watch pickerObj:', val);
				this.currentPicker = val;
				this.confirmValue = 0;
				this.valueIndex = 0;
			}
		},

		methods: {
			onStart() {
				console.log('onStart')
				this.bRolling = true;
			},
			bindChange(value, index) {
				this.bRolling = false;
				// console.log('bindChange=', value, index);
				this.confirmValue = value;
				this.valueIndex = index;
			},
			onConfirm() {
				if (this.bRolling) {
					uni.showToast({
						title: '请等待滚动完成',
						icon: "none"
					})
					return;
				}

				this.$emit("confirmEvent", {
					type: this.currentPicker.pickerType,
					value: this.confirmValue,
					index: this.valueIndex
				})
			},
			onCancel() {
				this.$emit("cancelEvent")
			},
			onKeyInput(event) {
				// !(/(^[1-9]\d*$)/).test(event.target.value)
				if (isNaN(event.target.value)) {
					//如果不是数字...
					// uni.showToast({
					// 	title: '输入正整数',
					// 	icon:'none',
					// 	mask:true
					// })
					this.confirmValue = 1;
				} else {
					this.confirmValue = Math.abs(event.target.value);
				}

				console.log("this.confirmValue:", this.confirmValue);
				// this.$set(this.currentPicker, 'defaultValue', this.confirmValue);
			}
		}
	}
</script>

<style>
	.cu-dialog {
		width: 100%;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}

	.left-button,
	.right-button {
		margin-bottom: 20upx;
		padding: 15upx 60upx;
		background-color: #FFFFFF;
	}

	.bDisable {
		/* background-color: ;
		 */
		opacity: 0.5;
	}

	.left-button {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		border-right: 1upx solid #E6E6E6;
		/* color:rgba(245, 245, 245, 1); */
	}

	.right-button {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}

	.picker-input {
		margin-left: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #AAAAAA;
		background-color: #FFFFFF;
		width: 330rpx;
		border-radius: 5px;
	}
</style>