vue+vant 组件图片上传自定义删除组件

最新推荐文章于 2024-06-05 10:08:10 发布

onlylele

最新推荐文章于 2024-06-05 10:08:10 发布

阅读量5.5k

点赞数 2

分类专栏： vue 技巧

本文链接：https://blog.csdn.net/onlylele/article/details/103156612

版权

本文介绍如何在Vue结合Vant组件库中，针对图片上传功能进行自定义删除操作的实现。通过HTML模板和JavaScript方法，包括delImg自定义删除方法以及onRead图片读取上传方法，详细阐述了完善图片上传组件删除功能的过程。

摘要由CSDN通过智能技术生成

使用vant组件中的图片上传功能，删除不完善，如何自己定义vant中图片上传功能的删除功能；

1、html模板文件：

css:

.van-doc-demo-block__title {margin: 0;font-weight: 400;font-size: .14rem;color: rgba(69,90,100,.6);padding: .35rem .15rem .15rem;}
.upfile-img .weui-uploader__files{margin-left: .1rem;float: left;}
.upfile-img .weui-uploader__input-box{margin-left: .1rem;margin-right: 0;}
.show-img .van-doc-demo-block__title{padding: .05rem .15rem .15rem;}
.show-img .applay-uploadimg .weui-uploader__file{width: .95rem;height: .95rem;}
.showImgs .van-popup{background-color:rgba(0,0,0,0); max-width: 100%;}
.showImgs .van-popup a.close{width: .20rem;height: .20rem;line-height: .20rem;position: absolute;top:0;right: 0;border: 1px solid rgb(238, 238, 238);border-radius: 50%;text-align: center;color: #fff;}
.showImgs .van-popup img{max-width: 100%;}
.partner-popup .van-popup{background-color: rgba(0,0,0,0);}

            <section class="van-doc-demo-section demo-uploader">
                    <h2 class="font-size14 font-black line-height26 ptb-10 pl-10">交易凭证上传：
                        <span class="van-cell__value ml-5 font-size12 font-org">
                            (最多