1、孙子组件
1.1、html部分
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部分
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部分
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部分
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部分
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部分
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部分
html
复制代码
<template>
<view>
<setCycle @clickSetCycle="cycleControl"></setCycle>
</view>
</template>
3.2、JavaScript部分
javascript
复制代码
import setCycle from '../../components/setCycle/setCycle.vue'
export default {
comments: {
setCycle
},
data() {
return {
}
},
methods: {
cycleControl(data) {
console.log(data);
//
},
}
}
4、效果图
