build

vu/src/components/PreviewImg/index.vue

+<template>
+  <div
+    class="preview-wrap"
+    @click="preview">
+    <img :src="silders" >
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    silders: ''
+  },
+  methods: {
+    preview() {
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+    .preview-wrap {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, .4);
+        z-index: 9999;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

vu/src/components/Upload/EditUpload.vue

 <template lang="html">
-<div class="upload-image-wrap" ref="uploadImage">
+  <div
+    ref="uploadImage"
+    class="upload-image-wrap">
     <div v-if="multiple">
-        <ul class="upload-image-items" v-if="currImages.length">
-            <li class="upload-image-item" v-for="(item, inx) in currImages" :disabled="disabled">
-                <div class="image-inner" v-resize="item"></div>
-                <div class="image-after" @click.stop="deleteImage(inx)"></div>
-            </li>
-            <li class="upload-image-item upload-icon">
-                <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
-                    <slot></slot>
-                </upload-img>
-            </li>
-        </ul>
-        <div class="upload-icon" v-else>
-            <upload-img class="multiple" @upload-img="onUpload" @uploaded="onUploaded" @error="onUploadError">
-                <slot></slot>
-            </upload-img>
-        </div>
+      <ul
+        v-if="currImages.length"
+        class="upload-image-items">
+        <li
+          v-for="(item, inx) in currImages"
+          :disabled="disabled"
+          class="upload-image-item">
+          <div
+            v-resize="item"
+            class="image-inner"/>
+          <div class="image-after">
+            <span @click.stop="deleteImage(inx)"/>
+            <span @click.stop="lookImage(item)"/>
+          </div>
+        </li>
+        <li class="upload-image-item upload-icon">
+          <upload-img
+            class="multiple"
+            @upload-img="onUpload"
+            @uploaded="onUploaded"
+            @error="onUploadError">
+            <slot/>
+          </upload-img>
+        </li>
+      </ul>
+      <div
+        v-else
+        class="upload-icon">
+        <upload-img
+          class="multiple"
+          @upload-img="onUpload"
+          @uploaded="onUploaded"
+          @error="onUploadError">
+          <slot/>
+        </upload-img>
+      </div>
+      <preview-img
+        v-if="isflag"
+        v-model="isflag"
+        :silders="silders"/>
     </div>
     <div v-else>
-        <div class="upload-icon single-upload">
-            <div class="single-upload-icon" v-resize="currImages">
-                <span v-if="currImages">修改图片</span>
-            </div>
-            <div :class="{ hide: currImages != false }" class="single-upload-body">
-                <upload-img class="multiple" @upload-img="onSingleUpload" @uploaded="onUploaded" @error="onUploadError">
-                    <slot v-if="currImages == false"></slot>
-                </upload-img>
-            </div>
+      <div class="upload-icon single-upload">
+        <div
+          v-resize="currImages"
+          class="single-upload-icon">
+          <span v-if="currImages">修改图片</span>
+        </div>
+        <div
+          :class="{ hide: currImages != false }"
+          class="single-upload-body">
+          <upload-img
+            class="multiple"
+            @upload-img="onSingleUpload"
+            @uploaded="onUploaded"
+            @error="onUploadError">
+            <slot v-if="currImages == false"/>
+          </upload-img>
         </div>
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
 // import './webuploader'
 import Resize from '@/components/Upload/utils/resizeImage'
 import UploadImg from '@/components/Upload/UploadImgBox'
+import PreviewImg from '@/components/PreviewImg'
 
 export default {
-    data () {
-        return {
-            inputValue: this.value
-        }
+  directives: {
+    Resize
+  },
+  components: {
+    PreviewImg,
+    UploadImg
+  },
+  props: {
+    value: {
+      type: [Array, String]
     },
-    directives: {
-        Resize
+    limit: {
+      type: Number
     },
-    props: {
-        value: {
-            type: [Array, String]
-        },
-        limit: {
-            type: Number
-        },
-        disabled: Boolean,
-        multiple: Boolean
+    disabled: Boolean,
+    multiple: Boolean
+  },
+  data() {
+    return {
+      inputValue: this.value,
+      isflag: false,
+      silders: ''
+    }
+  },
+  computed: {
+    currImages() {
+      if (this.multiple && Array.isArray(this.inputValue)) {
+        const images = [...this.inputValue]
+        return images.length ? images : []
+      } else {
+        return this.inputValue || ''
+      }
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.inputValue = newVal
+    }
+  },
+  methods: {
+    // 上传中...
+    onUpload(res) {
+      if (!res.data.file_url) return
+      console.log(this.inputValue)
+      const content = this.inputValue.length
+      const limit = Number(this.limit)
+      if (limit && content >= limit) {
+        this.$emit('limit', content)
+      } else {
+        this.inputValue.push(res.data.file_url)
+        this.$emit('input', this.inputValue)
+      }
     },
-    watch: {
-        value (newVal) {
-            this.inputValue = newVal
-        }
+    onSingleUpload(res) {
+      if (!res.data.file_url) return
+      this.inputValue = res.data.file_url
+      this.$emit('input', res.data.file_url)
     },
-    computed: {
-        currImages () {
-            if (this.multiple && Array.isArray(this.inputValue)) {
-                let images = [...this.inputValue]
-                return images.length ? images : []
-            } else {
-                return this.inputValue || ''
-            }
-        }
+    // 上传完成
+    onUploaded(res) {
     },
-    methods: {
-        // 上传中...
-        onUpload (res) {
-            if (!res.data.file_url) return
-            console.log(this.inputValue)
-            let content = this.inputValue.length
-            let limit = Number(this.limit)
-            if (limit && content >= limit) {
-                this.$emit('limit', content)
-            } else {
-                this.inputValue.push(res.data.file_url)
-                this.$emit('input', this.inputValue)
-            }
-        },
-        onSingleUpload (res) {
-            if (!res.data.file_url) return
-            this.inputValue = res.data.file_url
-            this.$emit('input', res.data.file_url)
-        },
-        // 上传完成
-        onUploaded (res) {
-        },
 
-        onUploadError (error) {
-            console.log(error)
-        },
+    onUploadError(error) {
+      console.log(error)
+    },
 
-        deleteImage (inx) {
-            this.inputValue.splice(inx, 1)
-            this.$emit('input', this.inputValue)
-        }
+    deleteImage(inx) {
+      this.inputValue.splice(inx, 1)
+      this.$emit('input', this.inputValue)
     },
-    components: {
-        UploadImg
+
+    lookImage(item) {
+      this.isflag = true
+      this.silders = item
     }
+  }
 }
 </script>
 
@@ -164,11 +207,42 @@ export default {
                     position: absolute;
                     left: 50%;
                     top: 50%;
-                    transform: translate(-50%, -50%);
+                    transform: translate(-100%, -50%);
                     width: 18px;
                     height: 18px;
                     background: url('../../assets/image/svg/uploadDelete.svg') 50% 50% no-repeat;
                 }
+                &:before {
+                    content: '';
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(50%, -50%);
+                    width: 18px;
+                    height: 18px;
+                    background: url('../../assets/image/svg/magnifier.png') no-repeat;
+                    background-size: 18px;
+                }
+                span{
+                    &:first-child{
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(-80%, -50%);
+                        width: 30px;
+                        height: 30px;
+                        z-index: 999;
+                    }
+                    &:last-child{
+                        position: absolute;
+                        left: 50%;
+                        top: 50%;
+                        transform: translate(10%, -50%);
+                        width: 30px;
+                        height: 30px;
+                        z-index: 999;
+                    }
+                }
             }
             &[disabled]::before {
                 position: absolute;