web前端之uniApp实现选择时间功能-编程知识

web前端之uniApp实现选择时间功能

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);// },}
}