技術標籤：微信小程式vue.js小程式

用父子元件傳值的方法寫一個時間選擇器的公共元件的方法

由於之前小程式裡面用到很多同樣的時間篩選器，近期改bug的時候就體會到了沒有用公共元件的痛苦，程式碼量多，修改的地方較多比較麻煩，所以就封裝了一個時間選擇器公共方法。

時間選擇器的功能是
1.預設選中今天和上個月的今天
2.時間選擇框相差的時間不超過一年
3.開始時間不能大於結束時間
利於了vue父子元件傳值的方法
父元件接收到的，這裡的:hello=‘hello’ :hi='hi’是父元件往子元件內傳送的值
子元件利用props來接收

點選搜尋就成功的接收到值了

以下是程式碼

<template>
	<div>
		<view class="seach_demo">
			<view class="seach_box">
				<view class="serch-info-a">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							開始：
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :end="endDate" @change="bindDateChange">
								<view class="uni-list-cell-data">
									<!-- <image src="../../../static/mine/mine-arrow.png" mode="" class="uni-list-cell-img"></image> -->
									<text class="uni-list-cell-text">{{date}}</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="serch-info-b">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							結束：
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date2" :end="endDate" @change="bindDateChange2">
								<view class="uni-list-cell-data">
									<!-- <image src="../../../static/mine/mine-arrow.png" mode="" class="uni-list-cell-img"></image> -->
									<text class="uni-list-cell-text">{{date2}}</text>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<button class="searchButton" @click="changeVal" :loading="flag">查詢</button>
		</view>
	</div>
</template>

<script>
	export default {
		props: {
			hello: {
				type: String
			},
			hi: {
				type: String
			}
		},
		data() {
			return {
				commpents: '簡單的點選效果',
				date: this.formatDate(new Date()),
				date2: this.formatDate2(new Date()),
				demos: '',
				demos2: '',
			}
		},
		watch: {

		},
		methods: {
			changeVal() {
				console.log(this.date, this.date2);

				this.$emit('changeVal', this.date, this.date2)
			},
			bindDateChange(e) {
				var dateBegin = new Date(e.target.value).getTime();
				var dateEnd = new Date(this.date2).getTime();
				if (dateEnd > dateBegin) {
					if (dateEnd - dateBegin > 31622400000) {
						uni.hideLoading();
						uni.showToast({
							title: "最多查詢一年內資料",
							icon: "none",
							duration: 2000
						});
						dateEnd = dateBegin + 31622400000;
					}
				} else if (dateEnd < dateBegin) {
					uni.hideLoading();
					uni.showToast({
						title: "開始時間不能大於結束時間",
						icon: "none",
						duration: 2000
					});
					dateEnd = dateBegin + 31622400000;
				}
				if (dateBegin > new Date().getTime()) {
					dateBegin = new Date().getTime();
				}
				if (dateEnd > new Date().getTime()) {
					dateEnd = new Date().getTime();
				}
				dateBegin = this.formatDate2(dateBegin);
				dateEnd = this.formatDate2(dateEnd);
				this.date = dateBegin;
				this.date2 = dateEnd;
			},

			bindDateChange2(e) {
				console.log(123);
				var dateBegin = new Date(this.date).getTime();
				var dateEnd = new Date(e.target.value).getTime();
				if (dateEnd > dateBegin) {
					if (dateEnd - dateBegin > 31622400000) {
						uni.hideLoading();
						uni.showToast({
							title: "最多查詢一年內資料",
							icon: "none",
							duration: 2000
						});
						dateBegin = dateEnd - 31622400000;
					}
				} else if (dateEnd < dateBegin) {
					uni.hideLoading();
					uni.showToast({
						title: "開始時間不能大於結束時間",
						icon: "none",
						duration: 2000
					});
					dateBegin = dateEnd - 31622400000;
				}
				if (dateBegin > new Date().getTime()) {
					dateBegin = new Date().getTime();
				}
				if (dateEnd > new Date().getTime()) {
					dateEnd = new Date().getTime();
					uni.hideLoading();
					uni.showToast({
						title: "最多查詢一年內資料",
						icon: "none",
						duration: 1000
					});
				}
				dateBegin = this.formatDate2(dateBegin);
				dateEnd = this.formatDate2(dateEnd);
				this.date = dateBegin;
				this.date2 = dateEnd;

			},

			formatDate(type) {
				const date = new Date(type);
				let year = date.getFullYear();
				let month = date.getMonth();
				if (month == '0') {
					year = year - 1;
					month = 12
				}
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			formatDate2(type) {
				const date = new Date(type);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		},
		computed: {
			endDate() {
				return this.formatDate2(new Date().getTime());
			}
		},
		created() {
			// 接受到的父元件的傳值
			console.log(this.$props.hello, this.$props.hi);
		}
	}
</script>

<style>
	.seach_demo {
		width: 100%;
		background-color: #F1F1F1;
	}

	.seach_box {
		display: flex;
	}

	.searchButton {
		width: 690rpx;
		height: 88rpx;
		background-image: linear-gradient(90deg, #91B7E0 0%, #5880BE 100%);
		box-shadow: 0 14rpx 34rpx 0 rgba(88, 128, 190, 0.40);
		border-radius: 46.5rpx;
		font-family: PingFangSC-Semibold;
		font-size: 34rpx;
		color: #FFFFFF;
		margin-bottom: 67rpx;
	}

	.serch-info-a {
		width: 330rpx;
		height: 80rpx;
		margin-top: 42rpx;
		margin-bottom: 45rpx;
		background-color: #fff;
		border-radius: 40rpx;
	}

	.serch-info-b {
		/* width: 167rpx; */
		background-color: #fff;
		border-radius: 40rpx;
		width: 330rpx;
		height: 80rpx;
		margin-top: 42rpx;
		margin-bottom: 45rpx;
		margin-left: 20rpx;
	}

	.uni-list-cell-db {
		display: inline-block;
		padding-top: 20rpx;
	}

	.uni-list-cell-left {
		display: inline-block;
		padding-left: 20rpx;
	}
</style>

 

通過查詢拿到的值 用$emit傳給父元件

changeVal() {
				console.log(this.date, this.date2);
				//往父元件傳值 （開始日期和結束日期）
				this.$emit('changeVal', this.date, this.date2)
			},