niapp picker日期选择器有一个添加按钮,点击添加按钮就添加一个日期选择器,改变其中一个值的时候其他的选择器的值不变,代码示例
时间: 2024-04-13 22:29:32 浏览: 142
要实现 UniApp 中的日期选择器动态添加功能,并确保其中一个选择器的值改变时其他选择器的值不变,你可以使用 `v-for` 指令结合数组来动态生成选择器。以下是一个示例代码:
```html
<template>
<view class="container">
<view class="picker-group">
<picker v-for="(date, index) in datePickers" mode="date" :value="date" @change="dateChange(index)" :key="index"></picker>
<button @click="addDatePicker">添加</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
datePickers: [], // 存储日期选择器的值
};
},
methods: {
dateChange(index) {
// 更新指定索引的日期选择器的值
return (e) => {
this.datePickers[index] = e.mp.detail.value;
this.$forceUpdate(); // 强制更新视图
};
},
addDatePicker() {
// 添加一个日期选择器
this.datePickers.push('');
},
},
};
</script>
<style scoped>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.picker-group {
display: flex;
flex-direction: column;
align-items: center;
}
button {
margin-top: 10px;
}
</style>
```
在上述代码中,我们使用 `v-for` 指令将 `datePickers` 数组中的每个元素绑定到一个日期选择器上。通过点击 "添加" 按钮,我们可以向 `datePickers` 数组中添加一个空字符串,从而动态生成新的日期选择器。在每个日期选择器的 `@change` 事件中,我们使用闭包来确保能够获取到正确的索引值,然后更新对应索引的日期选择器的值,并通过 `this.$forceUpdate()` 强制更新视图,以保证其他选择器的值不变。
请根据你的实际需求修改代码,并将其适配到你的项目中。如果还有其他问题,请随时提问。
阅读全文