AddImagesBox

图片选取组件。

功能

• 本组件用于选择添加图片，可结合上传组件实现图片上传功能。
• 可以配置上传图片的大小。
• 可以配置选择图片最大数量。
• 支持删除图片。
• 支持图片选择完成事件。
• 提供上传图片的接口配置，若不配置则可以通过提供的事件接口自行处理图片上传等操作。

示例

基本用法，选择添加图片

<nut-addimagesbox 
class="btn"  
@imgMsg="addimg1"
></nut-addimagesbox>

限制图片大小及数量

<nut-addimagesbox 
class="btn"
:size="8000" 
:maxImg="6" 
:isUpload="true" 
:ajax="option"  
@imgMsg="addimg" 
></nut-addimagesbox>

图片删除，提供了delete接口可以直接选取要删除的图片，单击图片删除

<ul class="img-box">
    <li v-for="(img,key) in imgs3" :key="key" @click="deleteImg(key)">
        <img :src="img" alt="">
    </li>
</ul>
<nut-addimagesbox class="btn"
:delete="delete3"
@imgMsg="addimg3"
></nut-addimagesbox>

大图预览

该功能主要结合nut-pictureview组件一起使用，代码示例:

<ul class="img-box">
    <li v-for="(img,key) in imgs5" :key="key"  @click="setPicShow(key)">
        <img :src="img" alt="">
    </li>
</ul>
<nut-pictureview 
:visible.sync="picShow" 
:bgColor="coverColor" 
:imgArr="imgs5" 
:initNum="picShowNum" 
:pagination="showPage" 
@close-pic="closeDo"
></nut-pictureview>
<nut-addimagesbox 
class="btn"  
@imgMsg="addimg5"
></nut-addimagesbox>

Props

Events