uni-app自定义组件：2、修改日期选择器

原因：

picker

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

因为样式差别较大。所以不能偷懒，只好改改。。。

组件

<template>
	<view v-if="show_picker">
		<view class="pre_mark"  @click="pre_close"></view>
		<view class="pre_picker">
			<view class="pre_picker_header">
				<label class="left" @click="pre_cancel">取消</label>
				<label class="right" @click="pre_ok">确定</label>
			</view>
			<picker-view class="pre_picker_content" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "pre_picker_datelist",
		data() {			
			return {
				show_picker: false,
				years:[],
				year:'',
				months:[],
				month:'',
				days:[],
				day:'',
				value: [],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
			};
		},
		//属性
		props: {
			picker_y: {
				type: String, //属性类型
				value: ""
			},
			picker_m: {
				type: String, //属性类型
				value: ""
			},
			picker_d: {
				type: String, //属性类型
				value: ""
			}
		},
		mounted: function() {
			var _self = this;
			this.$nextTick(function() {
				// 如何有子组件加载完毕判断就用这里
				_self.load_data();
			})
		},
		methods: {
			load_data: function() {
				console.log('日期控件加载');
				console.log('y=' + this.picker_y + ' m=' + this.picker_m + ' d=' + this.picker_d);
				// this.$emit('myevent', this.date);
				
				var dd = new Date()
				this.years = []
				this.year = dd.getFullYear()
				this.months = []
				this.month = dd.getMonth() + 1
				this.days = []
				this.day = dd.getDate()
				for (let i = 1990; i <= dd.getFullYear(); i++) {
					this.years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					this.months.push(i)
				}
				for (let i = 1; i <= 31; i++) {
					this.days.push(i)
				}
				// console.log(this.years);
				// console.log(this.months);
				// console.log(this.days);
				
				console.log('y='+this.year+' m='+this.month+' d='+this.day);
				this.value=[this.year,this.month,this.day];
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			pre_showmy: function() {
				this.show_picker = this.show_picker ? false : true;
				if(this.show_picker){
					this.load_data();
				}
			},
			pre_close:function(){
				this.show_picker=false;
			},
			pre_cancel:function(){
				this.pre_close();
			},
			pre_ok:function(){
				this.fun_select();
				this.pre_close();
			},
			fun_select:function(){
				this.$emit('myevent',this.year,this.month,this.day);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		}
	}
</script>

<style>
	.pre_mark {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	}

	.pre_picker {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		height: 36%;
		background-color: #efeff4;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		animation: mydonghua 0.8s;
		-webkit-animation: mydonghua 0.8s;
	}

	@keyframes mydonghua {
		0%   {height:0%;}
		100% {height:36%;}
	}


	@-webkit-keyframes mydonghua {
		/* Safari and Chrome */
		0%   {height:0%;}
		100% {height:36%;}
	}

	.pre_picker_header {
		display: block;
		position: relative;
		text-align: center;
		width: 100%;
		height: 45px;
		background-color: #fff;
	}

	.pre_picker_header>label {
		display: block;
		max-width: 50%;
		top: 0;
		height: 100%;
		box-sizing: border-box;
		padding: 0 14px;
		font-size: 17px;
		line-height: 45px;
		overflow: hidden;
		cursor: pointer;
	}

	.left {
		float: left;
		color: #888;
	}

	.right {
		float: right;
		color: #007aff;
	}
	
	.pre_picker_content{
		display: block;
		position: relative;
		text-align: center;
		width: 100%;
		height: 100%;
		font-size: 16px;
	}
	
	.item{
		/* height: 36px !important; */
		line-height: 50px;
	}
</style>

父页面调用

..........
<mypicker @myevent="fun_changebirthday"  :picker_y="y" :picker_m="m" :picker_d="d" ref="mypickerlist" ></mypicker>
......................
// 引入组件
import mypicker from "../../components/pre_picker_datelist.vue";
.....................
// 注册组件
components: {
			mypicker
		},
...............
            fun_set_birthday:function(){
				this.$refs.mypickerlist.pre_showmy();
			},
			fun_changebirthday:function(y,m,d){
				// console.log('修改生日='+y+'-'+m+'-'+d);
				m=m>9?m:('0'+m);
				d=d>9?d:('0'+d);
				// console.log('修正生日='+y+'-'+m+'-'+d);
			}

如果有用请多多打赏，O(∩_∩)O~

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3214965