feat(upload-imgs): 支持简单预览

Author: quanquan2100

src/components/base/upload-imgs/index.vue

@@ -52,14 +52,20 @@
             <div class="preview" title="更换图片" @click.prevent.stop="handleClick(item.id)">
               <i class="el-icon-edit"></i>
             </div>
-            <div class="control-bottom">
+            <div class="control-bottom" v-if="sortable || preview">
               <i
+                v-if="sortable"
                 title="前移"
                 class="control-bottom-btn el-icon-back"
                 :class="{disabled: (i === 0)}"
                 @click.stop="move(item.id, -1)"></i>
-              <i class="control-bottom-btn el-icon-view" title="预览"></i>
               <i
+                v-if="preview"
+                class="control-bottom-btn el-icon-view"
+                title="预览"
+                @click.stop="previewImg(item)"></i>
+              <i
+                v-if="sortable"
                 title="后移"
                 class="control-bottom-btn el-icon-right"
                 :class="{disabled: (i === (itemList.length - 1))}"
@@ -381,6 +387,11 @@ export default {
     // 初始化 Draggable
   },
   methods: {
+    previewImg(data) {
+      this.$confirm(`<img src="${data.display}" style="width: 100%; height: 100%" />`, '预览', {
+        dangerouslyUseHTMLString: true,
+      })
+    },
     move(id, step) {
       const { itemList } = this
       // 找到操作的元素

src/plugins/ImgsUpload/views/Demo.vue

@@ -28,6 +28,12 @@
         <el-form-item label="最大数量">
           <upload-imgs :rules="rules" :multiple="true" :max-num="3" />
         </el-form-item>
+        <el-form-item label="定制宽高-排序">
+          <upload-imgs :rules="rules" :width="200" :height="150" :value="initData" :sortable="true" />
+        </el-form-item>
+        <el-form-item label="图像缩略图展示模式">
+          <upload-imgs :rules="rules" :width="200" :height="150" fit="cover" :value="initData" />
+        </el-form-item>
       </el-form>
     </div>
   </div>
@@ -60,6 +66,10 @@ export default {
         id: '12d3',
         display: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
         src: 'http://img-home.7yue.pro/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png',
+      }, {
+        id: 'hahah',
+        display: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
+        src: 'http://img-home.7yue.pro/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png',
       }],
     }
   },