企业-实名认证图片预览

src/components/Upload/img.vue

@@ -12,8 +12,8 @@
   </div>
   <div v-else class="" style="position: relative;">
     <v-icon color="error" class="close" @click="handleClose">mdi-close-circle</v-icon>
-    <v-img :src="src" width="100" height="100" rounded class="imgBox" :class="{'cursor-pointer': showCursor}" @click="handleClickImage"></v-img>
-    <div @click="handleClickImage" class="color-primary cursor-pointer text-center text-decoration-underline">点击预览</div>
+    <v-img :src="src" width="100" height="100" rounded class="imgBox" :class="{'cursor-pointer': showCursor}" @click="emit('imgClick')"></v-img>
+    <div @click="emit('imgClick')" class="color-primary cursor-pointer text-center text-decoration-underline">点击预览</div>
   </div>
 </template>
 
@@ -67,10 +67,6 @@ const handleClose = () => {
   src.value = ''
   emit('delete')
 }
-
-const handleClickImage = () => {
-  emit('imgClick')
-}
 </script>
 
 <style scoped lang="scss">

src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/authentication.vue

@@ -33,18 +33,20 @@
       <CtForm ref="CtFormRef" :items="formItems" style="width: 300px;">
         <template #backUrl="{ item }">
           <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
-          <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''"></Img>
+          <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''" @imgClick="handlePreview(item.value)"></Img>
         </template>
         <template #frontUrl="{ item }">
           <div class="mt-5 d-flex">
             <div class="color-666 font-size-14 mr-5">{{ item.label }}</div>
-            <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''"></Img>
+            <Img :value="item.value" @success="val => item.value = val" @delete="item.value = ''" @imgClick="handlePreview(item.value)"></Img>
           </div>
         </template>
       </CtForm>
       <v-btn class="buttons mt-5" color="primary" @click="handleSave">{{ $t('common.submit') }}</v-btn>
     </div>
   </div>
+
+  <PreviewImg v-if="showPreview" :list="imgList" @close="showPreview = !showPreview"></PreviewImg>
 </template>
 
 <script setup>
@@ -116,6 +118,14 @@ const getData = async () => {
 }
 getData()
 
+// 图片预览
+const showPreview = ref(false)
+const imgList = ref([])
+const handlePreview = (url) => {
+  imgList.value = [url]
+  showPreview.value = true
+}
+
 const handleAgain = () => {
   formItems.value.options.forEach(item => {
     item.value = info.value[item.key]