<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
- 阅读:1123
产品分类: 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 
- 
                                                  
 
             
             
             
			
