null/components/kx-choose.vue

<template>
	<view name='KXDateTime'>
		<popup ref="popup" type="bottom" :zIndex="999">
			<view class="time-panel">
				<!-- <image src="/static/perm/cancel.png" mode="aspectFill" class="cancel-img" @click="close"></image> -->
				
				<view class="zicon-quxiao cancel" @click="close"></view>
				<view class="but">
					<text class="title">请选择</text>
				</view>
				
				<picker-view  :indicator-style="indicatorStyle" :value="val"  @change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item,index) in datas" :key="index">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			    <view class="btn" @click="ok">确定</view>
			</view>
		</popup>
	</view>
</template>

<script>
	// import uniPopup from '../uni-popup/uni-popup.vue'
	export default {
		name: 'KXChoose',
		components: {
			// uniPopup
		},
		// props: {
		// 	datas:[],
		// },
		data() {
			return {
				title: 'picker-view',
				indicatorStyle: `height: 80rpx;`,
				datas:[],
				activeItem:'',
				val:[0],
			}
		},
		methods: {
			open(datas) {
				if(!datas && datas.length === 0){
					return;
				}
				this.datas = datas;
				this.activeItem = this.datas[this.val[0]];
				this.$refs.popup.show();
			},
			close() {
				this.$refs.popup.hide()
				this.$emit("close");
			},
			ok() {
				// 点击确定才触发
				if(!this.activeItem){
					return;
				}
				this.$emit("rundata",{item:this.activeItem,items:this.datas})
				this.$refs.popup.hide()
			},
			bindChange: function(e) {
				console.log('bindChange===',e);
				let val = e.detail.value; //只要上下滑动就触发
				this.val = val;
				this.activeItem = this.datas[val[0]]
			},
		},
	}
</script>

<style lang="scss" scoped>
	.time-panel{
		width: 100%;
		height: 687rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 45rpx 30rpx 0;
		position: relative;
		.cancel{
			width: 88rpx;
			height: 88rpx;
			padding: 30rpx;
			position: absolute;
			top:0;
			right: 0;
		}
	}
	.cancel-img{
		width: 88rpx;
		height: 88rpx;
		padding: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 6;
	}
	.but {
		background: #fff;
		// height: 80rpx;
		// line-height: 80rpx;
		width: 100%;
		text-align: left;
		.title{
			font-size: 36rpx;
			font-weight: 700;
			color: #333333;
		}
		
	}
	picker-view {
		width: 100%;
		background: #fff;
		height: 403rpx;
		text-align: center;
		.item{
			height: 80rpx;
			line-height: 80rpx;
		}
	}
    .btn{
		width: 620rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #009ffd;
		border-radius: 45rpx;
		box-shadow: 5rpx 5rpx 15rpx 0px rgba(0,159,253,0.6); 
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		margin:73rpx auto 42rpx;
	}
</style>