基于unapp的自定义picker组件

基于unapp的自定义picker组件

<template>
	<view class="pop-picker-container">
		<uni-popup ref="popupRef" type="bottom" style="z-index: 999;">
			<view class="pop-content">
				<view class="pop-top">
					<view class="top-quxiao" @click="handleCancle">取消</view>
					<view class="top-seach">
						<uni-easyinput prefixIcon="search" v-model="seachWord" placeholder="请输入搜索内容">
						</uni-easyinput>
					</view>
					<view class="top-sure" @click="handleSure">确定</view>
				</view>
				<!--  -->
				<picker-view :immediate-change='true' :indicator-class="indicatorStyle" :value="picValue" 
					@change="bindChange" class="picker-view" >
					<picker-view-column>
						<!-- class="pickViewColumn" -->
						<view v-for="item in sPickerListArr" :key="item.id" class="item">
							{{item.name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 100rpx;line-height:100rpx`,
				picValue: [0],
				list: [{
						id: 1,
						name: 'zs'
					},
					
					
				],
				seachWord:""
			}
		},
		props:{
			pickerList:{
				type:Array,
				default:[]
			}
		},
		computed:{
			sPickerListArr(){
				return this.pickerList.filter(item => {
				 
				  if (item.name.includes(this.seachWord)) {
				    return item
				  }
				})
			}
		},
		
		methods: {
			popOpen() {
				this.$refs.popupRef.open();
			},
			handleCancle(){
				this.$refs.popupRef.close();
			},
			handleSure(){
				console.log("sPickerListArr==",this.sPickerListArr);
				
				this.$refs.popupRef.close();
			},
			bindChange(e) {
				console.log("val===",e);
				console.log("val=获取下标==",e.detail.value[0])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-picker-container {
		position: relative;

		.pop-content {
			width: 100%;
			height: 600rpx;
			background-color: #fff;
			position: relative;
			.pop-top{
				display: flex;
				height: 120rpx;
				align-items: center;
				justify-content: space-around;
			}
			.top-quxiao{
				color: #606266;
			}
			.top-sure{
				color: #3168DF;
			}
			.top-seach{
				width: 420rpx;
			}
		}

	}

	.picker-view {
		width: 750rpx;
		height: 360rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 68rpx;
		// height: 68rpx;
		text-align: center;
	}

	// .pickViewColumn {
	// 	height: 60%;
	// 	// line-height: 60rpx;
	// 	/* margin-top: -300rpx; */
	// 	// height: 280rpx;
	// }
</style>