vue实现添加9张图片，预览删除

一、效果

点击加号图片就上传，九张图之后就隐藏加号图片，不能添加了。

点击图片进行预览删除：

二、准备工作

1、这里上传图片使用了vant 的 Uploader 图片上传，使用很简单。
2、预览删除是使用一个弹窗的子组件实现的，比较简单，页面就不记录了。弹窗点击删除之后，直接emit信息给父组件。

三、代码部分

1.HTML

 <div class="dynamic-imgs ">
            <p class="img-title">上传图片</p>
            <div class="table-list">
				//显示图片
                <div v-for="(img,index) in dynamicPics">
                    <img class="img-add" :src="img" @click="clickImg(img,index)"/>
                </div>
                //这里就是那个加号图片，isAddImg控制是否显示，上传图片用van-uploader
                <div v-show="isAddImg">
                    <van-uploader :after-read="onRead" accept="image/*" multiple>
                        <img class="img-add" src="/static/images/addpic.png"/>
                    </van-uploader>
                </div>
            </div>
            //弹窗
            <dialog-view-img :isShow="isSelectImg" :imgInfo="viewImg" @showTag="previewImg"></dialog-view-img>

 </div>

2、js

data中先定义数据

 data() {
            return {
                dynamicPics: [],     //存放添加图片
                isSelectImg: false,  //开启弹窗标志
                viewImg: {},         //放置预览图片信息
            }
 },

计算dynamicPics的图片张数是否到了9张，需要限制几张就写成几，这里是限制9张。

 computed: {
            isAddImg() {
            	//如果已经9张了，isAddImg为false，隐藏加号
                if (this.dynamicPics.length >= 9) {
                    return false;
                } else {
                    return true;
                }
            },
},

各类方法：

 methods: {
			onRead(file) {
                //添加图片
                this.dynamicPics.push(file.content);
            },
			//点击图片事件
            clickImg(url, index) {
                console.log(url, index);
				//获得图片的url和index，传给弹窗
                this.viewImg = {
                    url: url,
                    index: index,
                };
				//打开弹窗
                this.isSelectImg = true;

            },

            //预览图片返回
            previewImg(value) {
				//关闭弹窗
                this.isSelectImg = false;
				//点击删除时，返回图片在数组中的index
                if (value !== null) {
                    console.log('删除图片', value.index);
                    this.dynamicPics.splice(value.index, 1);
                }
            },

}

四、总结

包括弹窗的完整代码：实现添加图片，预览删除