zhihuixiaoyuan2-ui/mine/components/search/search.vue

<template>
	<view class="alldata flexc">
		<!-- :start="startDate" :end="endDate" -->
		<!-- <view class="list">
			<picker :value="className" range-key="className" :range="tablist"  @change="bindDateChange" >
				<view class="flexc">
					<view class="alldatain f15 cofe f500" :style="'text-align:'+textAlign">{{date||'考试班级'}}</view>
					<image :src="upimg"></image>
				</view>
			</picker>
		</view> -->
		<view class="list">
			<picker mode="date"  :value="date"  @change="bindDateChangea">
				<view class="flexc">
					<view class="alldatain f15 cofe f500" :style="'text-align:'+textAlign">{{date||'考试时间'}}</view>
					<image :src="upimg"></image>
				</view>
			</picker>
		</view>
	</view>
</template>

<script>
	//:fields="fields" 表示选择器的粒度，默认为 day，App
	export default{
		props:{
			textAlign:{
				type: String,
				default () {
					return 'left'
				}
			},
			fields:{
				type: String,
				default () {
					return 'year'
				}
			},
			timedate:{
				type: String,
				default () {
					return ''
				}
			},
			tablist:{
				type: Array,
				default () {
					return []
				}
			},
			className:{
				type: Array,
				default () {
					return []
				}
			}
			
		},
		data(){
			return{
				upimg:require("@/mine/static/score/up.png"),
				date:''
			}
		},
		mounted() {
			if(this.timedate){
				this.date=this.timedate;
			}
		},
		methods:{
			bindDateChange(e){
				var val=e.detail.value
				this.date=e.detail.value;
				this.$emit("bindDateChange",val)
			},
			bindDateChangea(e){
				var val=e.detail.value
				this.date=e.detail.value;
				this.$emit("getSearch",this.date)
			},
		}
	}
</script>

<style lang="scss" scoped>
 // 选择年份
 .alldata{padding: 20rpx 36rpx;height: 100rpx;box-sizing: border-box;
	.list{width: 33.3%;}
	image{width: 22rpx;height: 16rpx;margin-left: 14rpx;}
	.alldatain{min-width: 124rpx;}
 }	
</style>