<uni-file-picker limit="5" title="最多可选择5张" :autoUpload="false" v-model="pictureSelected"></uni-file-picker>这串代码如何实现当我选中图片添加进去的时候弹出添加成功提醒,当我取消添加的时候弹出添加失败提醒
时间: 2023-11-11 21:50:35 浏览: 153
你可以通过监听 `v-model` 的变化来实现添加成功或添加失败的提醒。首先,你需要在对应的组件中添加一个监听器:
```javascript
<uni-file-picker
limit="5"
title="最多可选择5张"
:autoUpload="false"
v-model="pictureSelected"
@change="handleFilePickerChange"
></uni-file-picker>
```
然后,在你的 Vue 实例中,定义 `handleFilePickerChange` 方法:
```javascript
methods: {
handleFilePickerChange(value) {
if (value.length > this.pictureSelected.length) {
// 图片添加成功提醒
console.log("添加成功");
} else {
// 取消添加提醒
console.log("添加失败");
}
}
}
```
在 `handleFilePickerChange` 方法中,我们可以通过比较 `value` 的长度与之前保存的 `pictureSelected` 的长度来判断是添加成功还是取消添加。你可以根据需要进行相应的提醒处理,这里只是简单地使用 `console.log` 打印了提示信息。
当你选中图片添加进去时,会触发 `@change` 事件,并调用 `handleFilePickerChange` 方法,从而实现添加成功提醒。当你取消添加时,也会触发 `@change` 事件,并调用 `handleFilePickerChange` 方法,从而实现添加失败提醒。
阅读全文