图片可点击查看大图

src/views/modules/advertising.vue

@@ -18,7 +18,7 @@
             </el-table-column>
             <el-table-column label="图片" prop="fileUrl">
                 <template #default="{ row }">
-                    <img :src="row.fileUrl" v-if="row.fileUrl" style="width: 130px;height: auto;">
+                    <img :src="row.fileUrl" v-if="row.fileUrl" style="width: 130px;height: auto;" @click="showBigImg(row.fileUrl)">
                 </template>
             </el-table-column>
             <el-table-column label="广告位标题" prop="title"></el-table-column>
@@ -94,6 +94,12 @@
                 <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
             </div>
         </el-dialog>
+        <el-dialog width="40%" :visible.sync="bigShow" title="广告位图片" @close="bigShow=false">
+            <img :src="bigImg" style="width: 100%;height: auto;">
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;margin-top: 50px;">
+                <el-button @click="bigShow=false" style="margin-right: 5%;">关 闭</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -130,6 +136,8 @@
     const loading = ref(false)
     const buttonLoading = ref(false)
     const show = ref(false)
+    const bigShow = ref(false)
+    const bigImg = ref('')
     const dialogTitle = ref('新增广告位')
     const advertRef = ref(null)
     const advertForm = ref({
@@ -267,6 +275,10 @@
         // }
         return true;
     }
+    const showBigImg = imgurl => {
+        bigImg.value = imgurl;
+        bigShow.value = true;
+    }
 
     onMounted(()=>{
         getList();