Browse Source

fix: 修改 upload 样式

lilinsen 5 years ago
parent
commit
05b184eb61
2 changed files with 16 additions and 12 deletions
  1. 14 11
      src/packages/uploader/demo.vue
  2. 2 1
      src/packages/uploader/img-cell.vue

+ 14 - 11
src/packages/uploader/demo.vue

@@ -4,16 +4,15 @@
     <P>自定义样式,和图片预览</P>
     <div>
       <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
+        
+        <div class="img-list">
+          <img-cell v-for="(item,index) in previewImg" 
+                    :key="index"   
+                    :src="item"
+                    :clear="()=>{clearImg(index)}"
+                      /> 
+
+           <nut-uploader
               class="demo-1"
               :name="name"
               :url="url"
@@ -26,7 +25,10 @@
               @start="demo1UploadStart"
               @showMsg="showMsg"
               :multiple="true"
-        >+</nut-uploader> 
+        >+</nut-uploader>           
+        </div>
+       
+         
       </div>
        
     </div>
@@ -248,5 +250,6 @@ export default {
   display: flex;  
   padding: 10px ;
   flex-wrap: wrap;
+  
 }
 </style>

+ 2 - 1
src/packages/uploader/img-cell.vue

@@ -25,7 +25,8 @@ export default {
         position: relative;
         display: inline-flex;
         align-items: center;
-        margin-right: 12px;        
+        margin: 0 12px 12px 0;        
+        border:1px solid #ccc;
         .close{
             position: absolute;
             display: block;