j***@126.com
j***@126.com
  • 发布:2022-05-28 11:10
  • 更新:2022-06-28 10:42
  • 阅读:1285

【报Bug】Picker 鼠标在上面滚动选择时报这个错误:UncaughtTypeError: Cannot redefine property: instance

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Win11

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

浏览器平台: Chrome

浏览器版本: 97

项目创建方式: HBuilderX

示例代码:
    <view>  
        <page-head :title="title"></page-head>  
        <view class="uni-title uni-common-pl">普通选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">  
                        <view class="uni-input">{{array[index].name}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  

        <!-- #ifndef MP-ALIPAY -->  
        <view class="uni-title uni-common-pl">多列选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">  
                        <view class="uni-input">{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
        <!-- #endif -->  

        <view class="uni-title uni-common-pl">时间选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">  
                        <view class="uni-input">{{time}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
        <view class="uni-picker-tips">  
            注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中  
        </view>  

        <view class="uni-title uni-common-pl">日期选择器</view>  
        <view class="uni-list">  
            <view class="uni-list-cell">  
                <view class="uni-list-cell-left">  
                    当前选择  
                </view>  
                <view class="uni-list-cell-db">  
                    <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">  
                        <view class="uni-input">{{date}}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
        <view class="uni-picker-tips">  
            注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中  
        </view>  
    </view>  
</template>  
<script>  

    function getDate(type) {  
        const date = new Date();  

        let year = date.getFullYear();  
        let month = date.getMonth() + 1;  
        let day = date.getDate();  

        if (type === 'start') {  
            year = year - 10;  
        } else if (type === 'end') {  
            year = year + 10;  
        }  
        month = month > 9 ? month : '0' + month;;  
        day = day > 9 ? day : '0' + day;  

        return `${year}-${month}-${day}`;  
    }  
    export default {  
        data() {  
            return {  
                title: 'picker',  
                array: [{name:'中国'},{name: '美国'}, {name:'巴西'}, {name:'日本'}],  
                index: 0,  
                multiArray: [  
                    ['亚洲', '欧洲'],  
                    ['中国', '日本'],  
                    ['北京', '上海', '广州']  
                ],  
                multiIndex: [0, 0, 0],  
                date: getDate({  
                    format: true  
                }),  
                startDate:getDate('start'),  
                endDate:getDate('end'),  
                time: '12:01'  
            }  
        },  
        methods: {  
            bindPickerChange: function(e) {  
                console.log('picker发送选择改变,携带值为:' + e.detail.value)  
                this.index = e.detail.value  
            },  
            bindMultiPickerColumnChange: function(e) {  
                console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)  
                this.multiIndex[e.detail.column] = e.detail.value  
                switch (e.detail.column) {  
                    case 0: //拖动第1列  
                        switch (this.multiIndex[0]) {  
                            case 0:  
                                this.multiArray[1] = ['中国', '日本']  
                                this.multiArray[2] = ['北京', '上海', '广州']  
                                break  
                            case 1:  
                                this.multiArray[1] = ['英国', '法国']  
                                this.multiArray[2] = ['伦敦', '曼彻斯特']  
                                break  
                        }  
                        this.multiIndex.splice(1, 1, 0)  
                        this.multiIndex.splice(2, 1, 0)  
                        break  
                    case 1: //拖动第2列  
                        switch (this.multiIndex[0]) { //判断第一列是什么  
                            case 0:  
                                switch (this.multiIndex[1]) {  
                                    case 0:  
                                        this.multiArray[2] = ['北京', '上海', '广州']  
                                        break  
                                    case 1:  
                                        this.multiArray[2] = ['东京','北海道']  
                                        break  
                                }  
                                break  
                            case 1:  
                                switch (this.multiIndex[1]) {  
                                    case 0:  
                                        this.multiArray[2] = ['伦敦', '曼彻斯特']  
                                        break  
                                    case 1:  
                                        this.multiArray[2] = ['巴黎', '马赛']  
                                        break  
                                }  
                                break  
                        }  
                        this.multiIndex.splice(2, 1, 0)  
                        break  
                }  
                this.$forceUpdate()  
            },  
            bindDateChange: function(e) {  
                this.date = e.detail.value  
            },  
            bindTimeChange: function(e) {  
                this.time = e.detail.value  
            }  

        }  
    }  
</script>  

<style>  
.uni-picker-tips {  
    font-size: 12px;  
    color: #666;  
    margin-bottom: 15px;  
    padding: 0 15px;  
    /* text-align: right; */  
}  
</style>  

操作步骤:

用hbuildx 生成一个新的hello app项目,选择vue3, 用内置浏览器运行,就会在控制台显示附加中显示的错误

预期结果:

没有附件中的错误

实际结果:

有错主

bug描述:

【报Bug】Picker 鼠标在上面滚动选择时报这个错误:UncaughtTypeError: Cannot redefine property: instance

2022-05-28 11:10 负责人:无 分享
已邀请:
j***@126.com

j***@126.com (作者)

操作步骤:
用hbuildx 生成一个新的hello app项目,选择vue3, 用内置浏览器运行,进行到picker实例,点击日期后,在下面滚动未选择日期,就会在控制台显示附加中显示的错误

j***@126.com

j***@126.com (作者)

没有解决,找不到问题,等官方消息

1***@qq.com

1***@qq.com

楼主解决了吗,vue3开发中我也有这个报错,只不过我是在picker组件的change事件触发时报错

w***@126.com

w***@126.com

我也是,在vue3开发中,picker组件的change事件触发时报错

航格瑞

航格瑞

我用的element-plus 的弹窗也有个这个错误,鼠标点击弹窗就出这个错误
at Function.defineProperty (<anonymous>)
at wrapperH5WxsEvent (uni-h5.es.js:1205:12)
at $nne (uni-h5.es.js:1234:14)
at HTMLDivElement.invoker (vue.runtime.esm.js:9533:19)
wrapperH5WxsEvent @ uni-h5.es.js:1205
$nne @ uni-h5.es.js:1234
invoker @ vue.runtime.esm.js:9533

1***@163.com

1***@163.com - eeeeeee

引入vant 个别组件 也会报这个错 目前没有找到啥原因

航格瑞

航格瑞

该问题已经修复了,最新alpha版本已经不会报错了

  • j***@126.com (作者)

    那还好,等稳定版吧

    2022-05-31 17:01

j***@126.com

j***@126.com (作者)

现在还不影响使用,但就是老有错误,看着不舒服

j***@126.com

j***@126.com (作者)

新的版本【3.4.15】已解决此问题

该问题目前已经被锁定, 无法添加新回复