uni-app Picker 鼠标在上面滚动选择时报这个错误：UncaughtTypeError Cannot redefine property: instance
uni-app Picker 鼠标在上面滚动选择时报这个错误：UncaughtTypeError Cannot redefine property: instance
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | Win11 | HBuilderX |
Picker 示例代码
<template>
<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>
### 操作步骤
用HBuilderX生成一个新的Hello App项目，选择Vue3，用内置浏览器运行，就会在控制台显示附加中的错误。预期结果
没有附件中的错误。
### 实际结果
有错误。Bug 描述
【报Bug】Picker 鼠标在上面滚动选择时报这个错误：Uncaught TypeError: Cannot redefine property: instance
操作步骤：
用hbuildx 生成一个新的hello app项目，选择vue3, 用内置浏览器运行，进行到picker实例，点击日期后，在下面滚动未选择日期，就会在控制台显示附加中显示的错误
我用的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
在 uni-app 中使用 Picker 组件时，如果出现 Uncaught TypeError: Cannot redefine property: instance 错误，通常是由于某些代码尝试重新定义或修改一个不可配置的属性 instance 导致的。这个问题可能与 uni-app 的内部实现或某些第三方库的冲突有关。
以下是一些可能的解决方案：
1. 检查代码中的 instance 属性
确保你的代码中没有尝试重新定义或修改 instance 属性。例如，检查是否有类似以下的代码：
Object.defineProperty(someObject, 'instance', {
value: 'someValue',
writable: true,
configurable: true
});如果存在这样的代码，尝试移除或修改它。
2. 更新 uni-app 和相关依赖
确保你使用的是最新版本的 uni-app 和相关依赖库。有时，这类问题可能是由于旧版本中的 bug 引起的，更新到最新版本可能会解决问题。
npm update3. 检查第三方库
如果你在项目中使用了第三方库，特别是那些可能修改全局对象或原型链的库，尝试暂时移除这些库，看看问题是否仍然存在。如果问题消失，那么可能是某个第三方库与 uni-app 的 Picker 组件产生了冲突。
4. 使用 v-if 控制 Picker 的渲染
有时，Picker 组件的渲染时机可能会导致问题。你可以尝试使用 v-if 来控制 Picker 的渲染，确保它在合适的时机被渲染。
<picker v-if="showPicker" :range="options" @change="onPickerChange"></picker>export default {
data() {
return {
showPicker: false,
options: ['Option 1', 'Option 2', 'Option 3']
};
},
methods: {
onPickerChange(event) {
console.log('Selected:', this.options[event.detail.value]);
}
},
mounted() {
this.showPicker = true; // 在合适的时机显示 Picker
}
};5. 检查浏览器控制台
在浏览器控制台中查看详细的错误堆栈信息，找到导致错误的源头。这可以帮助你更准确地定位问题。
6. 使用 try-catch 捕获错误
如果问题难以定位，可以尝试在相关代码块中使用 try-catch 捕获错误，避免程序崩溃。
try {
// 你的代码
} catch (error) {
console.error('Error:', error);
}