fix: 图片预览组件样式

src/packages/uploader/demo.vue

@@ -1,26 +1,38 @@
 <template>
   <div class="demo-list">
-    <h4>基本用法</h4>
+    <h4>通用方法</h4>
+    <P>自定义样式，和图片预览</P>
     <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-uploader
-            :name="name"
-            :url="url"
-            :xhrState="stateNum"
-            :acceptType="['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
-            @success="demo1Success"
-            @failure="demo1Fail"
-            @start="demo1UploadStart"
-            @showMsg="showMsg"
-          >{{demo1Name}}</nut-uploader>
-        </span>
-        <div slot="desc"></div>
-      </nut-cell>
+      <div class="preview-img-box">
+        <transition name="fade">
+            <div class="img-list" v-if="previewImg">
+              <img-cell v-for="(item,index) in previewImg" 
+                        :key="index"   
+                        :src="item"
+                        :clear="()=>{clearImg(index)}"
+                         /> 
+            </div>
+        </transition>
+        <nut-uploader
+              class="demo-1"
+              :name="name"
+              :url="url"
+              :xhrState="stateNum"
+              :acceptType="['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+              :isPreview="true"
+              @preview="preview"
+              @success="demo1Success"
+              @failure="demo1Fail"
+              @start="demo1UploadStart"
+              @showMsg="showMsg"
+              :multiple="true"
+        >+</nut-uploader> 
+      </div>
+       
     </div>
 
-    <h4>高级用法</h4>
-    <p>结合Button组件和Toast组件使用</p>
+    <h4>其它用法</h4>
+    <p>1. 结合 Button 组件和 Toast 组件使用</p>
     <div>
       <nut-cell>
         <span slot="title">
@@ -39,40 +51,7 @@
         <div slot="desc"></div>
       </nut-cell>
     </div>
-
-    <p>结合进度条Progress组件使用，展示上传进度</p>
-    <div>
-      <nut-cell>
-        <span slot="title">
-          <nut-uploader
-            :name="name"
-            :url="url"
-            :xhrState="stateNum"
-            :headers="headers"
-            @success="demoSuccess"
-            @fail="demoFail"
-            @progress="progress"
-            @showMsg="showMsg1"
-            :clearInput="true"
-          >
-            <nut-button size="small">上传</nut-button>
-          </nut-uploader>
-        </span>
-        <div slot="desc"></div>
-      </nut-cell>
-      <nut-cell>
-        <span slot="title">
-          <nut-progress
-            class="progress-style"
-            :percentage="progressNum"
-            :showText="true"
-            strokeWidth="12"
-          />
-        </span>
-        <div slot="desc"></div>
-      </nut-cell>
-    </div>
-
+    
     <p>自定义headers&formData</p>
     <div>
       <nut-cell>
@@ -94,13 +73,11 @@
       </nut-cell>
     </div>
 
-    <p>预览上传图片</p>
+    <!-- <p>预览上传图片</p>
     <transition name="fade">
-      <div v-if="previewImg">
-        <div class="img-outbox" v-for="(item,index) in previewImg" :key="index">
-          <img class="img-box" v-if="item" :src="item" alt />
+        <div class="img-list" v-if="previewImg">
+          <img-cell v-for="(item,index) in previewImg" :key="index"   :src="item" /> 
         </div>
-      </div>
     </transition>
     <div>
       <nut-cell>
@@ -121,7 +98,7 @@
         </span>
         <div slot="desc"></div>
       </nut-cell>
-    </div>
+    </div> -->
     <p>上传图片前处理图片内容</p>
     <nut-cell>
       <span slot="title">
@@ -164,8 +141,11 @@
 </template>
 
 <script>
+import imgCell from "./img-cell";
 export default {
-  components: {},
+  components: {
+    imgCell
+  },
   data() {
     return {
       selfData: {
@@ -185,10 +165,16 @@ export default {
         f2: 'test1'
       },
       progressNum: 0,
-      previewImg: null
+      previewImg: []
     };
   },
   methods: {
+    clearImg(index){
+      // console.log(index)
+      // let ary =  JSON.parse(JSON.stringify(this.previewImg));
+      this.previewImg.splice(index,1)
+      // console.log(ary)
+    },
     test(event) {
       console.log(event, '可以处理input选择的内容');
       return {
@@ -226,8 +212,11 @@ export default {
     progress(file, loaded, total) {
       this.progressNum = parseInt((100 * loaded) / total);
     },
-    preview(file) {
-      this.previewImg = file;
+    preview(file) {      
+      
+      let previewImg = this.previewImg
+      this.previewImg = [...previewImg,...file]
+      
     },
     showMsg1(msg) {
       this.$toast.text(msg);
@@ -240,51 +229,23 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.img-outbox {
-  margin-top: 20px;
-  margin-left: 20px;
-  width: 100px;
-  height: 100px;
-  border-radius: 6px;
-  position: relative;
-  border: 1px solid #f2f2f2;
-  line-height: 100px;
-  display: flex;
-  justify-content: center;
+.img-list{
+  display: flex;  
   align-items: center;
-
-  .img-box {
-    margin-top: 0;
-  }
-
-  .icon {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    right: 0;
-  }
-
-  .pr {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    color: #fff;
-    font-size: 16px;
-    text-align: center;
-    line-height: 100px;
-    background: rgba(0, 0, 0, 0.2);
-  }
 }
 
-.img-box {
-  margin-top: 20px;
-  max-width: 100%;
-  max-height: 100%;
-  border-radius: 6px;
+.demo-1{
+  width: 75px;
+  height: 75px;
+  line-height: 75px;
+  text-align: center;
+  border: 1px solid rgba(230,230,230,1);
+  border-radius: 3px;
+  background: #fff;
+}
+.preview-img-box{
+  display: flex;  
+  padding: 10px ;
+  flex-wrap: wrap;
 }
 </style>

src/packages/uploader/img-cell.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="img-outbox">  
+        <i class="close" @click="close"></i>      
+        <img class="img-box" v-if="src" :src="src" alt />        
+    </div>
+</template>
+<script>
+export default {
+    name:"img-cell",
+    props:['src','clear'],
+    methods:{
+        close(){
+            if(Object.prototype.toString.apply(this.clear) === '[object Function]'){
+                this.clear()
+            }            
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .img-outbox{
+        width: 76px;
+        height: 76px;
+        border-radius: 3px;
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        margin-right: 14px;
+        .close{
+            position: absolute;
+            display: block;
+            background: url(./../../assets/img/img-clear.png) no-repeat;
+            background-size: cover;;
+            width: 18px;
+            height: 18px;       
+            top:-9px;
+            right:-9px;    
+            cursor: pointer;
+        }
+        .img-box{
+            width: 100%;
+        }
+    }
+</style>

src/packages/uploader/uploader.vue

@@ -76,7 +76,7 @@ export default {
         },
         clearInput: {
             type: Boolean,
-            default: false
+            default: true
         },
         xmlError: {
             type: String,
@@ -128,8 +128,7 @@ export default {
                 onProgress(file, loaded, total) {
                     _this.$emit("progress", file, loaded, total);
                 },
-                onPreview(previewFile) {
-					debugger
+                onPreview(previewFile) {				
                     _this.$emit("preview", previewFile);
                 },
                 onSuccess(file, responseTxt) {
@@ -150,8 +149,7 @@ export default {
             const formData = new FormData();
             const opt = this.createUploaderOpts();
             opt.$el = tar;
-            if (this.isPreview) {
-				debugger
+            if (this.isPreview) {				
                 opt.previewData = tar.files;
 			}
 			let len = this.multiple ? tar.files.length : 1;