mobile-frame-h5-example/pages/componentsB/picker/index.vue

<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-title">演示效果</view>
			<view class="u-demo-area">
				<view class="u-demo-result-line">{{ input ? input : 'Picker值' }}</view>
				<u-picker
					:mode="mode"
					:defaultTime="defaultTime"
					v-model="show"
					:defaultRegion="defaultRegion"
					:params="params"
					end-year="2030"
					@confirm="confirm"
					:defaultSelector="defaultSelector"
					:range="range"
					:range-key="rangKey"
					@columnchange="columnchange"
				></u-picker>
			</view>
		</view>
		<view class="u-config-wrap">
			<view class="u-config-title u-border-bottom">参数配置</view>
			<view class="u-config-item">
				<view class="u-item-title">Picker开关</view>
				<u-subsection :current="status" :list="['显示', '隐藏']" @change="statusChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">模式选择</view>
				<u-subsection :list="['单列', '多列', '时间', '地区']" @change="modeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">默认时间</view>
				<u-subsection :list="['2019-12-11 20:15:35', '2020-02-05 13:09:42']" @change="defaultTimeChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">显示时分秒</view>
				<u-subsection :list="['显示', '隐藏']" @change="minSecChange"></u-subsection>
			</view>
			<view class="u-config-item">
				<view class="u-item-title">默认地区</view>
				<u-subsection :list="['广东-深圳-宝安', '海南-三亚-海棠']" @change="defaultRegionChange"></u-subsection>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			input: '',
			rangKey: 'name',
			mode: 'selector',
			range: ['一', '片', '冰', '心', '在', '玉', '壶'],
			defaultTime: '2019-12-11 20:15:35',
			defaultSelector: [0],
			defaultRegion: ['广东省', '深圳市', '宝安区'],
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true,
				province: true,
				city: true,
				area: true,
				timestamp: true
			}
		};
	},
	computed: {
		status() {
			return this.show == true ? 0 : 1;
		}
	},
	methods: {
		statusChange(index) {
			this.show = index == 0 ? true : false;
		},
		modeChange(index) {
			this.mode = ['selector', 'multiSelector', 'time', 'region'][index];
			if (this.mode == 'selector') {
				this.range = ['一', '片', '冰', '心', '在', '玉', '壶'];
				this.defaultSelector = [0];
			}
			if (this.mode == 'multiSelector') {
				this.range = [['亚洲', '欧洲'], ['中国', '日本'], ['北京', '上海', '广州']];
				this.defaultSelector = [0, 0, 0];
			}
			this.show = true;
		},
		defaultTimeChange(index) {
			this.defaultTime = index == 0 ? '2019-12-11 20:15:35' : '2020-02-05 13:09:42';
			this.mode = 'time';
			this.show = true;
		},
		defaultRegionChange(index) {
			this.defaultRegion = index == 0 ? ['广东省', '深圳市', '宝安区'] : ['海南省', '三亚市', '海棠区'];
			this.mode = 'region';
			this.show = true;
		},
		minSecChange(index) {
			if (index == 0) {
				this.params.hour = true;
				this.params.minute = true;
				this.params.second = true;
			}
			if (index == 1) {
				this.params.hour = false;
				this.params.minute = false;
				this.params.second = false;
			}
			this.mode = 'time';
			this.show = true;
		},
		confirm(e) {
			// console.log(e);
			this.input = '';
			if (this.mode == 'time') {
				if (this.params.year) this.input += e.year;
				if (this.params.month) this.input += '-' + e.month;
				if (this.params.day) this.input += '-' + e.day;
				if (this.params.hour) this.input += ' ' + e.hour;
				if (this.params.minute) this.input += ':' + e.minute;
				if (this.params.second) this.input += ':' + e.second;
			} else if (this.mode == 'region') {
				this.input = e.province.label + '-' + e.city.label + '-' + e.area.label;
			} else if (this.mode == 'selector') {
				this.input = this.range[e[0]];
			} else if (this.mode == 'multiSelector') {
				this.input = this.range[0][e[0]] + '-' + this.range[1][e[1]] + '-' + this.range[2][e[2]];
			}
		},
		columnchange(e) {
			let column = e.column, index = e.index;
			this.defaultSelector[column] = index;
			switch (column) {
				case 0: 
					switch (index) {
						case 0:
							this.range[1] = ['中国', '日本']
							this.range[2] = ['北京', '上海', '广州']
							break
						case 1:
							this.range[1] = ['英国', '法国']
							this.range[2] = ['伦敦', '曼彻斯特']
							break
					}
					this.defaultSelector.splice(1, 1, 0)
					this.defaultSelector.splice(2, 1, 0)
					break
				case 1: //拖动第2列
					switch (this.defaultSelector[0]) { //判断第一列是什么
						case 0:
							switch (this.defaultSelector[1]) {
								case 0:
									this.range[2] = ['北京', '上海', '广州']
									break
								case 1:
									this.range[2] = ['东京','北海道']
									break
							}
							break
						case 1:
							switch (this.defaultSelector[1]) {
								case 0:
									this.range[2] = ['伦敦', '曼彻斯特']
									break
								case 1:
									this.range[2] = ['巴黎', '马赛']
									break
							}
							break
					}
					this.defaultSelector.splice(2, 1, 0)
					break
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.input {
	border: 1px solid $u-light-color;
	border-radius: 4px;
	margin-bottom: 20px;
	height: 30px;
	font-size: 26rpx;
	flex: 1;
}

.input-wrap {
	display: flex;
}
</style>