uniApp实现选择时间功能
作者:牧码人MJ682517
这篇文章主要介绍了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); // }, } }
4、效果图
到此这篇关于uniApp实现选择时间功能的文章就介绍到这了,更多相关uniApp选择时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!