基于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>