Onlife/components/mpvue-citypicker/provincePicker.vue

<template>
	<view class="mpvue-picker">
		<view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
		<view class="mpvue-picker-content" :class="{'mpvue-picker-view-show':showPicker}">
			<view class="mpvue-picker__hd" catchtouchmove="true">
				<view class="mpvue-picker__action" @click="pickerCancel">取消</view>
				<view class="mpvue-picker__action" style="color:#000;" @click="pickerConfirm">確定</view>
			</view>
			<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
			  <picker-view-column>
			    <view class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</view>
			  </picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import provinceData from './city-data/province.js';
	export default {
		data() {
			return {
				pickerValue: [0,0,0],
				provinceDataList: [],
				showPicker: false,
			};
		},
		created() {
			this.init()
		},
		props: {
			/* 默認值 */
			pickerValueDefault: {
				type: Array,
				default(){
					return [0, 0, 0]
				}
			},
			selectedArea: {
				type: Array,
				default(){
					return []
				}
			},
			/* 主題色 */
			themeColor: String
		},
		methods: {
			init() {
				this.handPickValueDefault();
				let arrayP = [];
				let provinceArray = [];
				this.selectedArea.map((item)=>{
					let aa = item.slice(0,2);
					arrayP.push(aa)
				})
				provinceArray = provinceData.filter(item=>{
					return !arrayP.includes(item.value)
				});
				this.provinceDataList = provinceArray;
				this.pickerValue = this.pickerValueDefault;
			},
			show() {
				setTimeout(() => {
					this.showPicker = true;
				}, 0);
			},
			maskClick() {
				this.pickerCancel();
			},
			pickerCancel() {
				this.showPicker = false;
				this._$emit('onCancel1');
			},
			pickerConfirm(e) {
				this.showPicker = false;
				this._$emit('onConfirm1');
			},
			showPickerView() {
				this.showPicker = true;
			},
			pickerChange(e) {
				this.pickerValue = e.detail.value;
				this._$emit('onChange');
			},
			_$emit(emitName) {
				let pickObj = {
					label: this.provinceDataList[this.pickerValue[0]].label,
					value: this.pickerValue,
					code: this.provinceDataList[this.pickerValue[0]].value
				};
				this.$emit(emitName, pickObj);
			},
			handPickValueDefault() {
			  if (this.pickerValueDefault !== [0, 0, 0]) {
			    if (this.pickerValueDefault[0] > provinceData.length - 1) {
			      this.pickerValueDefault[0] = provinceData.length - 1;
			    }
			  }
			},
		}
	};
</script>

<style>
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 9px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}

	.picker-item {
		text-align: center;
		line-height: 40px;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 16px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 238px;
		background-color: rgba(255, 255, 255, 1);
	}
</style>