uniapp中使用uview2.0组件库多个u-picker 选择器时如何确定点的是哪个
时间: 2024-09-24 10:12:05 浏览: 43
uniapp uView u-picker组件三级联动Demo
在 UniApp 中使用 UView 2.0 组件库的 u-picker 选择器时,当有多个 picker 并列存在并且需要区分用户点击的是哪一个时,你可以通过绑定每个 picker 的值变化事件(如 `on-change` 或者 `@change`)来识别选中的组件。
首先,给每个 picker 组件设置一个唯一的 `ref` 属性,例如:
```html
<u-picker ref="picker1" v-model="pickerValue1"></u-picker>
<u-picker ref="picker2" v-model="pickerValue2"></u-picker>
```
然后,在对应的 Vue 组件中,监听这些 ref 对应的事件,例如:
```javascript
export default {
data() {
return {
pickerValue1: '',
pickerValue2: '',
// ... 其他数据
picker1Ref: null,
picker2Ref: null,
};
},
mounted() {
this.picker1Ref = this.$refs.picker1;
this.picker2Ref = this.$refs.picker2;
},
methods: {
handleChange(index) {
if (index === 0) {
console.log('Picker 1 selected:', this.pickerValue1);
} else if (index === 1) {
console.log('Picker 2 selected:', this.pickerValue2);
}
},
},
watch: {
'picker1Ref.value': 'handleChange',
'picker2Ref.value': 'handleChange', // 如果有更多 picker,添加更多的监听
},
};
```
这样,当用户在任何一个 picker 上做出选择时,相应的值会更新,并打印出哪个 picker 被选择了。
阅读全文