标签：index APICloud 封装 detail value month AVM 组件 data

因项目中很多表单要用到日期选择和时间选择的内容，所以基于picker封装了日期和时间选择的组件。

datePicker
组件内的年份是取得举例今年100年以内的年份，可根据时间需要进行扩容或缩减，月份是12个月固定的，每月的天数，根据所选年份和月份进行获取。默认设置当前日期。

<template>
    <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={dateMltiSelectorValue} onchange={this.dateMultiSelectorChange} oncolumnchange={this.dateMultiSelectorColumnChange}>			
		<text class="picker-label">{dateDesc}</text>
	</picker>
</template>
<script>
	export default {
		name: 'datePicker',
		props:{
			label:String,
			pickerId:String
		},
		installed(){
			this.getYears();	
			this.initDateData();
		},
		data() {
			return{
				year:[],
				month:[1,2,3,4,5,6,7,8,9,10,11,12],
				day:[],
				yearNow:new Date().getFullYear(),
				dateMltiSelectorValue:[0,0,0],
				selectYear:new Date().getFullYear(),
				selectMoth:1,
				selectDay:1,
				dateList:[],
				dateDesc:''
 
			}
		},
		methods: {
			getYears(){
				this.data.year=[];//一个页面多次使用的情况 必须先清空 否则会出现各种问题
				for(i=0;i<100;i++){
					this.data.year.push(this.yearNow-i);
				}
			},
			initDateData(){
				//根据当前年月获取当月天数
				this.data.day=[];
				var days = new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate();
				console.log(days);
				for(i=1;i<=days;i++){
					this.data.day.push(i);
				}
				this.data.dateMltiSelectorValue=[0,new Date().getMonth(),new Date().getDate()-1];
				this.data.dateList = [this.data.year,this.data.month,this.data.day];
				var picker = document.getElementById(this.props.pickerId);			
				picker.setData({
					data: this.data.dateList
				});
			},
			//根据年月获取天数
			setDays(){
				this.data.day=[];
				var days = new Date(this.data.selectYear, this.data.selectMoth, 0).getDate();
				for(i=1;i<=days;i++){
					this.data.day.push(i);
				}
				this.data.dateList = [this.data.year,this.data.month,this.data.day];
				var picker = document.getElementById(this.props.pickerId);
				picker.setData({
					data: this.data.dateList
				});
			},
			dateMultiSelectorChange(e){
				this.data.dateMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];			
				var year = this.data.year[e.detail.value[0]];
				// var month = this.data.selectMoth>9?this.data.selectMoth:'0'+this.data.selectMoth;
				var month = this.data.month[e.detail.value[1]]>9?this.data.month[e.detail.value[1]]:'0'+this.data.month[e.detail.value[1]];
				var day = this.data.day[e.detail.value[2]]>9?this.data.day[e.detail.value[2]]:'0'+this.data.day[e.detail.value[2]];
				this.data.dateDesc = year+'-'+month+'-'+day;
				this.fire('setDate', this.data.dateDesc);
			},
			dateMultiSelectorColumnChange(e){
				var column = e.detail.column;
				if (column == this.data.dateList.length-1) {
                    return;
                }
				if(column==0){
					this.data.selectYear = this.data.year[e.detail.value];
					this.data.dateMltiSelectorValue[0]=e.detail.value;
					this.setDays();		
				}
				else if(column==1){
					this.data.selectMoth = this.data.month[e.detail.value];
					this.data.dateMltiSelectorValue[1]=e.detail.value;
					this.setDays();			
				}
			}
		}
	}
</script>
<style>
    .picker {
        background-color: #ffffff;
    }
	.picker-label{
		font-size: 18px;
	}
</style>

timePicker

时、分、秒都是固定的，组件初始是默认的当前时间。

<template>
     <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={timeMltiSelectorValue} onchange={this.timeMultiSelectorChange}>			
		<text class="picker-label">{timeDesc}</text>
	</picker>
</template>
<script>
	export default {
		name: 'timePicker',
		props:{
			label:String,
			pickerId:String
		},
		installed(){
			this.setHours();
			this.setMinutes();	
			this.initDateData();
		},
		data() {
			return{
				hour:[],
				minute:[],
				second:[],
				timeList:[],
				timeMltiSelectorValue:[0,0,0],
				timeDesc:''
			}
		},
		methods: {
			setHours(){
				for (let index = 0; index < 24; index++) {
					this.data.hour.push(index>9?index:'0'+index);				
				}
			},
			setMinutes(){
				for (let index = 0; index < 60; index++) {
					this.data.minute.push(index>9?index:'0'+index);
					this.data.second.push(index>9?index:'0'+index);				
				}				
			},
			initDateData(){
				//初始化设定当前时间
				this.data.timeMltiSelectorValue=[new Date().getHours(),new Date().getMinutes(),new Date().getSeconds()];
				this.data.timeList=[this.data.hour,this.data.minute,this.data.second];
				var picker = document.getElementById(this.props.pickerId);
				picker.setData({
					data: this.data.timeList
				});
			},
			timeMultiSelectorChange(e){
				this.data.timeMltiSelectorValue=[e.detail.value[0],e.detail.value[1],e.detail.value[2]];		
				var hour = this.data.hour[e.detail.value[0]];
				var minute = this.data.minute[e.detail.value[1]];
				var second = this.data.second[e.detail.value[2]];
				this.data.timeDesc = hour+':'+minute+':'+second;
				this.fire('setDate', this.data.timeDesc);
			},
		}
	}
</script>
<style>
    .picker {
        background-color: #ffffff;
    }
	.picker-label{
		font-size: 18px;
	}
</style>

组件使用 

 如果一个页面中，同一组件多次使用，一定要注意要把组件ID进行区分。每个组件的ID通过当前页面传入组件。组件中通过props进行接收。

<template>
    <scroll-view class="page">
		<safe-area></safe-area>
		<view class="item">
			<text class="item-label">日程主题</text>
			<input class="item-input" placeholder="输入日程主题" v-model="title"/>
		</view>
		<view class="item">
			<text class="item-label">日程简要</text>
			<textarea  class="item-area" placeholder="输入日程简要内容" v-model="content"/>	
		</view>
		<view class="item">
			<text class="item-label">日期</text>
			<datePicker onsetDate="setDate" label=""  pickerId="datePicker"></datePicker>
		</view>
		<view class="item">
			<text class="item-label">时间</text>
			<timePicker onsetDate="setTime" label="" pickerId="timePicker"></timePicker>
		</view>
		<view class="item">
			<text class="item-label">人员</text>
			<input class="item-input" placeholder="请选择人员" v-model="title"/>
		</view>
		<view class="bt-box">
			<button class="bt" onclick={this.btnAction}>保存</button>
		</view>
    </scroll-view>
</template>
<script>
	import '../../components/datePicker.stml'
	import '../../components/timePicker.stml'
	export default {
		name: 'adddaily',
		apiready(){
 
		},
		data() {
			return{
				date:'',
				time:'',
				title:'',
				content:'',
				users:''
			}
		},
		methods: {
			setDate(e){
				this.data.date = e.detail;
			},
			setTime(e){
				this.data.time = e.detail;
			}
		}
	}
</script>
<style>
    .page {
        height: 100%;
		background-color: #ffffff;
    }
	.item{
		margin: 10px;
		border-bottom: 1px solid #ccc;
	}
	.item-label{
		font-size: 13px;
		color: #666666;
	}
	.item-input{
		width: auto;
		border: 0;
	}
	.item-area{
		border: 0;
		height: 50px;
		width: auto;
	}
	.bt-box{
		margin: 10px;
	}
	.bt{
		color: #ffffff;
		font-size: 18px;
		background-color: #035dff;
		border-radius: 10px;
	}
</style>

效果图 

标签：index,APICloud,封装,detail,value,month,AVM,组件,data
来源： https://www.cnblogs.com/APICloud/p/16562348.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。