<template>
<view>
<picker-view :value="value" @change="bindChange" class="picker-view">
<picker-view-column v-if="false">
<view class="item" v-for="(item, index) in years" :key="item">{{ item }}年</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item, index) in months" :key="item">{{ item }}月</view>
</picker-view-column>
<picker-view-column>
<view class="item" v-for="(item, index) in days" :key="item">{{ item }}日</view>
</picker-view-column>
</picker-view>
</view>
</template>
<script>
export default {
data() {
const date = new Date();
const years = [];
const year = date.getFullYear();
const months = [];
const month = date.getMonth() + 1;
const days = [];
const day = date.getDate();
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i);
}
for (let i = 1; i <= 12; i++) {
months.push(i);
}
for (let i = 1; i <= 31; i++) {
days.push(i);
}
return {
years,
months,
days,
// value: [9999, month - 1, day - 1],
value: []
};
},
methods: {
bindChange(e) {
const val = e.detail.value;
console.log(val);
}
}
};
</script>
<style>
.picker-view {
width: 750rpx;
height: 600rpx;
margin-top: 20rpx;
}
.item {
height: 39px;
align-items: center;
justify-content: center;
text-align: center;
}
</style>
- 发布:2021-10-15 18:59
- 更新:2021-10-22 15:35
- 阅读:975
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.2.9
浏览器平台: Chrome
浏览器版本: 94.0.4606.81
项目创建方式: HBuilderX
示例代码:
操作步骤:
滑动日期中的“日”,vue3情况下,因为change获取的e.detail.value值没有空白占位,且v-if=false下,column仍然有占位
滑动日期中的“日”,vue3情况下,因为change获取的e.detail.value值没有空白占位,且v-if=false下,column仍然有占位
预期结果:
在vue3下,picker-view的change事件获取的e.detail.value类似vue2下的正常数组,且picker-view-column v-if=false下,数组数据正常显示
在vue3下,picker-view的change事件获取的e.detail.value类似vue2下的正常数组,且picker-view-column v-if=false下,数组数据正常显示
实际结果:
在vue3下,picker-view的change事件获取的e.detail.value数组位数错误,且picker-view-column v-if=false下,数组仍然有占位。
在vue3下,picker-view的change事件获取的e.detail.value数组位数错误,且picker-view-column v-if=false下,数组仍然有占位。
bug描述:
vue2 下 picker-view-column v-if=false下,change获取的e.detail.value值中数据正常,且数据有空白占位
vue3 下 picker-view-column v-if=false下,change获取的e.detail.value值中数据不正常,v-if=false下仍有占位,造成数据错误。
3.2.11 已修复
-
5***@qq.com (作者)
vue3下,change下输出e.detail.value会显示“空白占位了”,但是picker-view-column v-if=false下会显示“空白”占位到数组中,而不是不显示……
2021-11-06 21:03