PC端图片预览支持缩放

src/main.js

@@ -27,14 +27,17 @@ import 'element-ui/lib/theme-chalk/table.css';
 import 'element-ui/lib/theme-chalk/icon.css';
 import ElTableColumn from 'element-ui/lib/table-column';
 import ElPopover from 'element-ui/lib/popover';
+import ELImage from 'element-ui/lib/image';
 import 'element-ui/lib/theme-chalk/table-column.css';
 import 'element-ui/lib/theme-chalk/popover.css';
+import 'element-ui/lib/theme-chalk/image.css';
 import Vconsole from 'vconsole';
 // import wx from 'weixin-js-sdk';
 
 Vue.use(ElTable);
 Vue.use(ElTableColumn);
 Vue.use(ElPopover);
+Vue.use(ELImage);
 Vue.config.productionTip = false;
 Vue.prototype.parseTime = parseTime;
 Vue.prototype.selectDictLabel = selectDictLabel;

src/views/storeManagement/storeDetail.vue

@@ -159,11 +159,15 @@
             <div class="displayImg" style="padding: 16px">
               <div class="displayImgBox">
                 <div v-if="storeTypePOP">
+                  <!-- 移动端图片预览 vant -->
                   <van-image
                     width="100%"
                     height="160"
                     :src="setImgSrc(list.img)"
                     @click="deleteImgs(list.img)" />
+                  <!-- pc端图片预览 element -->
+                  <!-- <el-image :src="setImgSrc(list.img)" :preview-src-list="list.img.split(',')">
+                  </el-image> -->
                   <p style="text-align: center">
                     {{ list.ifJzStoreType != 1 ? '建店时门店照' : '家装前台照片' }}
                   </p>
@@ -1796,4 +1800,14 @@ export default {
     }
   }
 }
+.displayImgBox {
+  .el-image {
+    width: 100%;
+    height: 160px;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>