一、简介
选择多项内容,这里以选择星期为例。
如果什么都不选,点击“确定”
需要进行提示。未选之前字体是灰色的,选完之后,实际内容要渲染到页面上,后台打印的内容是数组类型,内含数值类而不是字符串类。因为打印的数组之后要传给后台。
演示:
二、代码
<template>
<view class="content">
<view class="right" @click="useDays" :style="!dayTxt?'opacity:0.6;':''">
{{dayTxt?dayTxt:'请选择使用日'}}
</view>
<!-- 使用日start -->
<u-popup :show="dayshow" mode="bottom" :round="20" @close="close" overlayOpacity="0.74" :closeable="true">
<view class="checkDays">
<view class="daytitle">
选择可使用日
</view>
<view>
<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange"
iconPlacement="right" activeColor="#6C8FF8" size="38rpx">
<u-checkbox :customStyle="{marginBottom: '40rpx'}" v-for="(item, index) in checkboxList1"
:key="index" :label="item.name" :name="item.nums" labelSize="32rpx">
</u-checkbox>
</u-checkbox-group>
</view>
<view class="subBtn" @click="daysBtn()">
确定
</view>
</view>
</u-popup>
<!-- 使用日end -->
</view>
</template>
<script>
export default {
data() {
return {
dayshow: false,
// 使用日
checkboxValue1: [],
dayTxt: '',
// 数组
checkboxList1: [{
name: '周一',
nums: 1,
disabled: false
},
{
name: '周二',
nums: 2,
disabled: false
},
{
name: '周三',
nums: 3,
disabled: false
},
{
name: '周四',
nums: 4,
disabled: false
},
{
name: '周五',
nums: 5,
disabled: false
},
{
name: '周六',
nums: 6,
disabled: false
},
{
name: '周日',
nums: 7,
disabled: false
}
],
}
},
onLoad() {},
methods: {
close() { //关闭弹出层
this.dayshow = false
},
// 使用天
useDays() {
console.log("选择可使用的日期");
this.dayshow = true
},
checkboxChange(n) {
console.log(n);
this.checkboxValue1 = n
},
// 确定
daysBtn() {
if (this.checkboxValue1.length == 0) {
uni.showToast({
icon: 'none',
title: '请选择天数'
})
} else {
this.close()
let dayTxt = []
this.checkboxValue1.forEach((i) => {
this.checkboxList1.forEach((item, index) => {
if (item.nums == i) {
dayTxt.push(item.name)
}
})
})
console.log(this.checkboxValue1)
this.dayTxt = dayTxt.join()
}
},
}
}
</script>
<style lang="scss">
// 使用日弹框
.checkDays {
padding: 0 30rpx;
font-size: 34rpx;
.daytitle {
text-align: center;
font-size: 34rpx;
font-weight: bold;
padding: 40rpx 0;
}
.subBtn {
margin: 40rpx 30rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #6C8FF8;
box-shadow: 0px 0px 24rpx 0px rgba(202, 202, 202, 0.41);
border-radius: 50rpx;
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
}
}
</style>
三、总结与分析
1.网址:https://www.uviewui.com/components/checkbox.html
2.整体图:
3.三目运算
<view class="right" @click="useDays" :style="!dayTxt?'opacity:0.6;':''">
{{dayTxt?dayTxt:'请选择使用日'}}
</view>
data() {
return {
dayTxt: '',
}
},
onLoad() {
console.log(Boolean(this.dayTxt));//结果是false
},
不要在data里面定义初始变量值了,直接在结构里面进行三目判断吗,由于定义是个空数组
,打印一下它的布尔类型得到的是false
,三目的特性:
表达式?‘ 表达式结果为真输出前面这个’:‘为假输出后面这个’;
2>1 ? 1 : 2 ;//2大于1吗? 大于1,所以条件为真输出前面的1 结果是1
var a = '张起灵'
a == '吴邪' ? 'yes':'no'; //结果为no
所以此例子
dayTxt?dayTxt:'请选择使用日' //dayTxt为空为false,不满足条件 输出请选择使用日
:style="!dayTxt?'opacity:0.6;':'' " //!false就是true,满足条件走第一个 所以刚开始默认文字颜色的透明度是0.6,黑色的0.6就是灰色
4.push
网址:https://www.runoob.com/jsref/jsref-push.html
dayTxt.push(item.name) 旧数组.push(新内容)
5.forEach遍历
网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
let dayTxt = []
this.checkboxValue1.forEach((i) => {
this.checkboxList1.forEach((item, index) => {
if (item.nums == i) {
dayTxt.push(item.name)
}
})
})
console.log(this.checkboxValue1)
this.dayTxt = dayTxt.join()
//dayTxt 是要显示在页面上的文字的集合,即数组,这里重新定义为空数组
//this.checkboxValue1.forEach((i)=>{})
//这里对选中的多个日期返回的数组[6,7]进行遍历,得到6 , 7,所以i = 6,i = 7
//this.checkboxList1.forEach((item, index)=》) 对整个数组(内容7个)进行遍历循环,
{
name: '周六',
nums: 6,
disabled: false
},
//选中的i 与 循环出来的元素的nums进行比较,如果相等,说明选中的就是这个,
//在这里对比,周六、周天的对象对比了出来,item.name
//我们只需要把元素的name push到空数组daytxt里面,那么dayTxt:['周六','周天']