uniApp实现选择时间功能_Javascript

1、孙子组件

1.1、html部分

<template>
	<view>
		<checkbox-group @change="checkboxchange">
			<view class="check_number_box">
				<view class="check_number_item" v-for="(item, i) in checknumberdata" :key="i">
					<view>
						<!-- tostring() 的作用是把数字转为字符串，否则报错 -->
						<checkbox :value="item.tostring()" :checked="item == defaultvalue[0]" />
					</view>
					<text>{{ item }}</text>
				</view>
			</view>
		</checkbox-group>
	</view>
</template>

1.2、javascript部分

export default {
	props: {
		checknumberdata: {
			type: number,
			default: () => {
				return 7
			},
		}
	},
	data() {
		return {
			defaultvalue: [1]
		}
	},
	methods: {
		checkboxchange(event) {
			this.defaultvalue = event.detail.value;
		}
	}
}

1.3、css部分

* {
	margin: 0;
	padding: 0;
}
.check_number_box {
	box-sizing: border-box;
	padding: 10rpx 50rpx;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10rpx 10rpx;
}
.check_number_item {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 30rpx;
}
.check_number_item>text {
	margin-left: 6rpx;
}

2、子组件

2.1、html部分

<template>
	<view>
		<view class="set_cycle_box">
			<radio-group @change="radiochange">
				<view class="cycle_box">
					<!-- 每日 -->
					<view class="cycle_item">
						<view>每日</view>
						<view>
							<radio value="1" checked="true" />
						</view>
					</view>
					<!-- 每周 -->
					<view class="cycle_item">
						<view>每周</view>
						<view>
							<radio value="2" />
						</view>
					</view>
					<checknumber :checknumberdata="weekcycle" v-show="current == 2" ref="weekdata"></checknumber>
					<!-- 每月 -->
					<view class="cycle_item">
						<view>每月</view>
						<view>
							<radio value="3" />
						</view>
					</view>
					<checknumber :checknumberdata="daycycle" v-show="current == 3" ref="daydata"></checknumber>
					<!-- 自定义 -->
					<view class="cycle_item">
						<view>自定义</view>
						<view>
							<radio value="4" />
						</view>
					</view>
					<view class="set_cycle_title" v-show="current == 4">
						请选择月份
					</view>
					<checknumber :checknumberdata="monthcycle" v-show="current == 4" ref="monthcustomadata"></checknumber>
					<view class="set_cycle_title" v-show="current == 4">
						请选择日期
					</view>
					<checknumber :checknumberdata="daycycle" v-show="current == 4" ref="daycustomadata"></checknumber>
				</view>
			</radio-group>
			<view class="submit" @click="submitbtn">
				确认
			</view>
		</view>
	</view>
</template>

2.2、javascript部分

import checknumber from '@/components/checknumber/checknumber.vue'
export default {
	components: {
		checknumber
	},
	data() {
		return {
			current: 1,
			// 给孙子组件传递参数（start）
			weekcycle: 7,
			daycycle: 31,
			monthcycle: 12,
			// 给孙子组件传递参数（end）
		}
	},
	methods: {
		// 单选状态
		radiochange(event) {
			let i = event.detail.value;
			this.current = i;
		},
		// 确认
		submitbtn() {
			let i = this.current;
			i = number(i);
			let submitdata = {};
			switch (i) {
				case 2:
					submitdata.type = i;
					submitdata.submitweek = this.$refs.weekdata.defaultvalue;
					break;
				case 3:
					submitdata.type = i;
					submitdata.submitday = this.$refs.daydata.defaultvalue;
					break;
				case 4:
					submitdata.type = i;
					submitdata.submitcustomamonth = this.$refs.monthcustomadata.defaultvalue;
					submitdata.submitcustomaday = this.$refs.daycustomadata.defaultvalue;
					break;
				default:
					submitdata.type = i;
					submitdata.submitday = [1];
			}
			this.$emit('clicksetcycle', submitdata)
		}
	}
}

2.3、css部分

.set_cycle_box {
	margin-top: 60rpx;
}
.cycle_box {
	padding: 0 50rpx;
	font-size: 30rpx;
	font-weight: 600;
}
.cycle_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 16rpx 0;
}
.submit {
	background-color: #007aff;
	color: #ffffff;
	font-size: 32rpx;
	font-weight: 600;
	width: 30%;
	line-height: 50rpx;
	text-align: center;
	border-radius: 10rpx;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	margin: 60rpx 0;
}
.set_cycle_title {
	margin: 16rpx 0;
	font-size: 26rpx;
	color: #888888;
	padding-left: 50rpx;
}

3、父组件

3.1、html部分

<template>
	<view>
		<setcycle @clicksetcycle="cyclecontrol"></setcycle>
	</view>
</template>

3.2、javascript部分

import setcycle from '../../components/setcycle/setcycle.vue'
export default {
	comments: {
		setcycle
	},
	data() {
		return {
		}
	},
	methods: {
		cyclecontrol(data) {
			console.log(data);
			// 
		},
	}
}