h5-elab-open-ownerUnion/components/subComponents/dmPickerView.vue

<template>
	<dm-pop-view ref='popView' @confirm='handleConfirm' :title="title" :maskTapHide='maskTapHide'>
		<picker-view class="pop-pickerView" indicator-style='height:80rpx' :value="selectValue" @change="handleChange">
			<picker-view-column class="picker_column">
				<view class="column-item" v-for="(item,index) in options" :key="index">{{item.title}}</view>
			</picker-view-column>
		</picker-view>
	</dm-pop-view>
</template>

<script>
	import dmPopView from './dmPopView.vue'
	export default {
		props: {
			options: Array,
			
			value: [String, Number],
			title:{
				type:String,
				default:'请选择'
			},
			maskTapHide: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				selectValue: [0],
				selIdx: 0,
			}
		},
		methods: {
			show() {
				this.$refs.popView.show()
				this.options.forEach((item, i) => {
					if (item.value == this.value) {
						this.selIdx = i;
						this.selectValue = [this.selIdx];
					}
				})
			},
			handleConfirm() {
				var self = this
				var timeout = setTimeout(function() {
					self.$emit('confirm', {
						'selItem': self.options[self.selIdx],
						'selIdx': self.selIdx
					})
					clearTimeout(timeout)
				}, 100);
			},
			handleChange(e) {
				this.selectValue = e.detail.value
				this.selIdx = e.detail.value[0] || 0
			},
		},
		components: {
			dmPopView
		}
	}
</script>

<style scoped lang="scss">
	.pop-pickerView {
		margin: 40rpx 0;
		width: 750rpx;
		height: 300rpx;
		
		.picker_column{
			width: 750rpx;
		}

		.column-item {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			box-sizing: border-box;
			white-space: nowrap;
			overflow: hidden;
			align-items: center;
		    text-align: center;
			text-overflow: ellipsis;
			margin: 0 auto;
		} 
	}
</style>