被.date一层挡住了，所以点击下面的v-for元素没有点击效果

本文链接：https://blog.youkuaiyun.com/wwf1225/article/details/90414682

博客指出因.date一层挡住，导致点击下面的v-for元素无点击效果，给出的解决办法是给.date日历标签添加 v-show=\dateCheck\，并给出了相关代码示例，包含分段器、输入框、卡片等组件的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

被.date一层挡住了，所以点击下面的v-for元素没有点击效果，解决办法：给.date日历标签添加 v-show="dateCheck"

如： <uni-popup v-show="dateCheck" :show="dateCheck" @hidePopup="open" class="date">

<view class="content">

<view v-show="typeChannel === 0" class="current0">

<view class="card0" >
<view class="card" v-for="(value,index) in list" :key="index" @click="showTopPopup(value)">
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.bxidNo"></image>
<text class="card-title">{{value.bxidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.xjidNo"></image>
<text class="card-title">{{value.xjidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.date"></image>
<text class="card-title">{{value.date}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.location"></image>
<text class="card-title">{{value.loacation}}</text>
</view>
<view class="card-item0">
<image class="card-img0" v-if="showImg" :src="img.picture"></image>
<text class="card-title0">{{value.status}}</text>
</view>

</view>
</view>

</view>
<view v-show="typeChannel === 1" class="current1" >

<view class="card0" >
<view class="card" v-for="(value,index) in list" :key="index" @click="showTopPopup">
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.bxidNo"></image>
<text class="card-title">{{value.bxidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.xjidNo"></image>
<text class="card-title">{{value.xjidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.date"></image>
<text class="card-title">{{value.date}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.location"></image>
<text class="card-title">{{value.loacation}}</text>
</view>
<view class="card-item0">
<image class="card-img0" v-if="showImg" :src="img.picture"></image>
<text class="card-title0">{{value.status}}</text>
</view>

</view>
</view>


</view>
<view v-show="typeChannel === 3" class="current3" >


<view class="card0" >
<view class="card" v-for="(value,index) in list" :key="index" @click="showTopPopup">
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.bxidNo"></image>
<text class="card-title">{{value.bxidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.xjidNo"></image>
<text class="card-title">{{value.xjidNo}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.date"></image>
<text class="card-title">{{value.date}}</text>
</view>
<view class="card-item">
<image class="card-img" v-if="showImg" :src="img.location"></image>
<text class="card-title">{{value.loacation}}</text>
</view>
<view class="card-item0">
<image class="card-img0" v-if="showImg" :src="img.picture"></image>
<text class="card-title0">{{value.status}}</text>
</view>

</view>
</view>

</view>

<uni-popup :show="showPopupMiddle" :type="popType" v-on:hidePopup="hidePopup">

</uni-popup>

<uni-popup :show="showPopupTop" :type="popType" @hidePopup="hidePopup">
<view class="pop">
<view class="pop-title">{{title0}}</view>
<view class="pop-item1">
<view>{{title1}}</view>
<view>{{phone}}</view>
<view>{{number}}</view>
</view>
<view class="pop-item2">
<view class="pop-item2-3">
<text>{{popTitle.title1}}</text>
<text>{{popTitle.title2}}</text>
</view>
</view>

<view class="pop-item2" v-for="(item,index) in popList" :key="index">
<view class="pop-item2-2" v-bind:class="{changeColor:index%2==0,changeWidth:index%2==1}">
<text>{{item.title1}}</text>
<text>{{item.title2}}</text>
</view>
</view>

</view>
<view class="input0">
<button type="default" @click="cancel">{{cancel0}}</button>
<button type="warn" @click="cancel">{{confirm0}}</button>
</view>
</uni-popup>

<uni-popup v-show="dateCheck" :show="dateCheck" @hidePopup="open" class="date">

<view v-if="timeData.lunar" class="calendar-info">
<view v-if="tags[0].checked">农历日期 : {{ timeData.year + '年' + timeData.month + '月' + timeData.date + '日（' + timeData.lunar.astro + ')' }}</view>
<view v-if="tags[0].checked">
{{ timeData.lunar.gzYear + '年' + timeData.lunar.gzMonth + '月' + timeData.lunar.gzDay + '日 (' + timeData.lunar.Animal + '年)' }}
{{ timeData.lunar.IMonthCn + timeData.lunar.IDayCn }} {{ timeData.lunar.isTerm ? timeData.lunar.Term : '' }}
</view>
</view>
<view v-if="show" class="calendar-mask" @click="open">
<view class="calendar-box" @click.stop="">
<uni-calendar :lunar="tags[0].checked" :fixed-heihgt="tags[1].checked" :slide="slide"
:disable-before="tags[6].checked" :start-date="startDate" :end-date="endDate" :date="date"
@change="change" @to-click="toClick" />
<view class="calendar-button-groups btn">
<button class="calendar-button-confirm btn1" @click="confirm">确定</button>
<button class="calendar-button-confirm btn2" @click="open">取消</button>
</view>
</view>
</view>
</uni-popup>


</view>
</template>

export default {
components: {
uniSegmentedControl,
uniPopup,
mediaList,
uniLoadMore,
uniIcon,
uniCalendar
},
data() {
/**
* 时间计算
*/
function getDate(date, AddDayCount = 0) {
if (typeof date !== 'object') {
date = date.replace(/-/g, '/')
}
let dd = new Date(date)
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
let y = dd.getFullYear()
let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
return y + '-' + m + '-' + d
}
let tags = [{
id: 0,
name: '农历',
checked: false,
attr: 'lunar'
},
{
id: 1,
name: '固定高度',
checked: false,
attr: 'fixedHeihgt'
},
{
id: 2,
name: '垂直滚动',
checked: false,
attr: 'vertical'
},
{
id: 3,
name: '水平滚动',
checked: false,
attr: 'horizontal'
},
{
id: 4,
name: '开始日期(' + getDate(new Date(), -1) + ')',
checked: false,
value: getDate(new Date(), -1),
attr: 'startDate'
},
{
id: 5,
name: '结束日期(' + getDate(new Date(), 2) + ')',
value: getDate(new Date(), 2),
checked: false,
attr: 'endDate'
},
{
id: 6,
name: '禁用今天之前的日期',
checked: false,
attr: 'disableBefore'
},
{
id: 7,
name: '自定义当前日期(' + getDate(new Date(), 1) + ')',
value: getDate(new Date(), 1),
checked: false,
attr: 'date'
}
]
return {
confirm0: "确定",
cancel0: "取消",
showImg: false,
img: {
bxidNo: "/static/images/2级/2设备报修/报修编号-icon.png",
xjidNo: "/static/images/2级/2设备报修/编号.png",
date: "/static/images/2级/2设备报修/时间.png",
location: "/static/images/2级/2设备报修/位置.png",
picture: "/static/images/2级/1巡检任务/3级-巡检记录/di-04.png"
},
list: [],
popTitle: {
title1: "报修内容",
title2: "维修进展"
},
popList: [{
title1: "栓内配件缺失，缺失设备；直流水枪。",
title2: "已补全"
},
{
title1: "消防栓玻璃有破损",
title2: "未修复"
},
{
title1: "干粉灭火器标示缺失",
title2: "已修复"
},
{
title1: "干粉灭火器筒体受损",
title2: "已修复"
}

],
title0: "设备报修情况",
title1: "负责人：张晓晓",
phone: "联系方式： 13812563210",
number: "设备编号： MHS2019032500000001",
show: false,
tags,
slide: 'none',
date: '',
startDate: '',
endDate: '',
searchDate: '',
dateCheck1: false,
dateCheck: false,
timeData: {},
items: [
'报修中',
'已处理',

],
searchTypes: [
'报修时间',
'维修状态'
],
typeIndex: false,
styles: [{
value: 'button',
text: '按钮'
}, {
value: 'text',
text: '文字'
}],
colors: [
'#007aff',
'#4cd964',
'#dd524d'
],
current: 0,
current1: 0,
typeChannel: 0,
activeColor: '#c30000',
styleType: 'text',
styleIndex: 0,
colorIndex: 0,
popType: 'middle',
title: 'popup',
showPopupMiddle: false,
showPopupTop: false,
showPopupBottom: false,
msg: ''
}
},
methods: {
cancel(){
this.showPopupTop=!this.showPopupTop
},
onClickItem(index) {
this.typeIndex = !this.typeIndex;
this.typeChannel = index;
},
onClickItem1(index) {
this.typeChannel = 2 + index;
},
styleChange(evt) {
const value = evt.target.value;
if (this.styleType !== value) {
this.styleType = value;
for (let i = 0; i < this.styles.length; i++) {
if (this.styles[i].value === value) {
this.styleIndex = i;
break;
}
}
}
},
colorChange(evt) {
if (this.styleType !== evt.target.value) {
this.activeColor = evt.target.value;
this.colorIndex = this.colors.indexOf(evt.target.value);
}
},
//统一的关闭popup方法
hidePopup: function() {
this.showPopupMiddle = false;
this.showPopupTop = false;
this.showPopupBottom = false;
},
//展示居中 popup
showMiddlePopup: function() {
this.hidePopup();
this.popType = 'middle';
this.showPopupMiddle = true;
},
//展示顶部 popup
showTopPopup: function(e) {
console.log(e);
this.hidePopup();
this.popType = 'top';
this.msg = '顶部 popup 信息内容';
this.showPopupTop = true;
},
//展示底部 popup
showBottomPopup: function() {
this.hidePopup();
this.popType = 'bottom';
this.msg = '底部 popup 信息内容';
this.showPopupBottom = true;
},
closeMask() {
this.show = false
},
toggle(index, item) {
this.tags[index].checked = !item.checked
// item.checked = !item.checked;
console.log(index)
if (index === 2) {
this.tags[3].checked = false
}
if (index === 3) {
this.tags[2].checked = false
}
// this.attribute[item.attr] = !item.checked;
},
open() {
this.dateCheck = !this.dateCheck;
console.log(this.dateCheck)
if (this.dateCheck) {
if (this.tags[3].checked) {
this.slide = 'horizontal'
} else if (this.tags[2].checked) {
this.slide = 'vertical'
} else {
this.slide = 'none'
}
if (this.tags[4].checked) {
this.startDate = this.tags[4].value
} else {
this.startDate = ''
}
if (this.tags[5].checked) {
this.endDate = this.tags[5].value
} else {
this.endDate = ''
}
if (this.tags[7].checked) {
this.date = this.tags[7].value
} else {
this.date = ''
}
this.show = true
console.log(this.date)
}

},
change(e) {
console.log('change 返回:', e.fulldate)
this.timeData = e
},
toClick(e) {
console.log('点击事件', e.fulldate)
this.timeData = e
},
confirm() {
this.show = false;
this.dateCheck = !this.dateCheck;
this.searchDate = this.timeData.fulldate;
console.log(this.searchDate)
},
loadData(action = 'add'){
const data =[{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "报修中"
},
{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "已处理"
},
{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "报修中"
},
{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "报修中"
},
{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "已处理"
},
{
bxidNo: "报修编号001",
xjidNo: "巡检编号002",
date: "2019年3月29日",
loacation: "松江区莘砖公路518号34号楼5楼",
status: "报修中"
}];
if (action === 'refresh') {
this.list = [];
}

data.forEach(item => {
this.list.push(item);
});
}
},
onLoad() {
this.loadData();
setTimeout(() => {
this.showImg = true;
}, 300);
},
onPullDownRefresh() {
this.loadData('refresh');
// 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
setTimeout(() => {
uni.stopPullDownRefresh();
}, 2000);
},
onReachBottom() {
this.loadData();
}
}
</script>

.segmented-control.text {

border: 0upx;
border-radius: 0upx;
font-size: 32upx;
font-weight: 550;
position: absolute;
left: -20upx;
top: 90upx;
margin-top: 10upx;
margin-bottom: 30upx;

}

.segmented-control.button {
width: 288upx;
height: 62upx;

}

.btn1 {
background-color: #C30000;
color: #FFFFFF;
}

.btn {
display: flex;
width: 750upx;
}

.btn button {
width: 750upx;
}

.date {
width: 750upx;
height: 850upx;
position: fixed;
left: 0;
bottom: 0;
}
/* .date > .calendar-mask{
position: absolute;
bottom: -100upx;
} */
.t1 {
color: #FFFFFF;
}

.weixiu {
position: relative;
}

.t {
position: absolute;
left: 38upx;
top: 20upx;
font-size: 30upx;
}

.wei {
display: flex;
justify-content: center;
align-items: center;
}

.weixiu image {
width: 168upx;
height: 100upx;
}

.top0 {
border-radius: 50upx;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 40upx;
margin-top: 30upx;
font-size: 15upx;

}
.top0 > uni-view{
padding: 20px;
}

.input-text {
width: 80upx;
height: 26upx;
font-family: PingFang-SC-Regular;
font-size: 28upx;
color: #666666;
padding-left: 30upx;

}

.input-item {
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-top: 30upx;
}

.input-item0 {
width: 520upx;
height: 80upx;
background-color: #ffffff;
box-shadow: 0px 10upx 19upx 1upx rgba(0, 0, 0, 0.1);
border-radius: 40upx;
padding-left: 80upx;
}

.input-img1 {
width: 24upx;
height: 24upx;
position: absolute;
left: 60upx;
top: 28upx;
}

.input-img2 {
width: 28upx;
height: 28upx;
position: absolute;
right: 210upx;
top: 28upx;
}

.input-img3 {
width: 28upx;
height: 28upx;
position: absolute;
right: 160upx;
top: 28upx;
}

page {
height: auto;
background-color: #f1f1f1;
}

.container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.header {
width: 500upx;
font-size: 38upx;
color: #333333;
padding-left: 30upx;
}

.content {
margin: 110upx auto;
padding-left: 30upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.color-tag {
width: 50upx;
height: 50upx;
}

/* 顶部弹出层开始*/
.pop {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}

.pop-title {
width: 680upx;
height: 102upx;
background-color: #C30000;
color: #FFFFFF;
text-align: center;
line-height: 102upx;
font-size: 36upx;
font-family: PingFang-SC-Bold;
position: absolute;
left: -15upx;
top: -180upx;
}

.pop-item1 {
box-sizing: border-box;
padding-bottom: 20upx;
}

.pop-item1 view {
font-family: PingFang-SC-Regular;
font-size: 28upx;
font-weight: normal;
color: #666666;
margin: 20upx;
}

.pop-item2 {
display: flex;
flex-direction: column;
}

.pop-item2-3 {
display: flex;
justify-content: space-between;
width: 650upx;
height: 70upx;
background-color: #dddddd;
align-items: center;
font-size: 36upx;
color: #333333;
box-sizing: border-box;
padding: 20upx;
font-weight: 520;
}

.pop-item2-2 {
display: flex;
justify-content: space-between;
width: 650upx;
height: 70upx;
background-color: #dddddd;
align-items: center;
font-size: 28upx;
color: #333333;
box-sizing: border-box;
padding: 20upx;
}

.pop-item2-2:nth-child(1) {}

.pop-item2-2 text {
font-family: PingFang-SC-Medium;
font-size: 30upx;
color: #333333;

}

.input0 {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
}

.input0 button {
width: 340upx;
height: 102upx;
}

.changeColor {
background-color: #FFFFFF;
height: 100upx;
}

.changeWidth {
background-color: #f1f1f1;

}
.topSegmented{
margin-bottom: 128upx;
/* padding-top: 30upx; */
}

/* .changeHeight {
background-color: #C30000;
}
*/
/* 顶部弹出层结束*/


/* card start */
.card0 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.card {
width: 690upx;
height: 300upx;
background-color: #ffffff;
box-shadow: 0px 23upx 27upx 2upx rgba(0, 0, 0, 0.11);
border-radius: 20upx;
position: relative;
margin: 30upx;
display: flex;
flex-direction: column;
justify-content: space-around;
box-sizing: border-box;
padding: 30upx;
}

.card-img {
width: 28upx;
height: 28upx;
}

.card-item0 {
position: absolute;
right: 20upx;
top: 0;
}

.card-img0 {
width: 60upx;
height: 140upx;

}

.card-title {
font-family: PingFang-SC-Medium;
font-size: 28upx;
color: #666666;
padding-left: 20upx;
}

.card-title0 {
font-size: 24upx;
color: #FFFFFF;
width: 22upx;
height: 73upx;
position: absolute;
left: 18upx;
top: 14upx;
}

/* card end */
</style>