|
|
@@ -9,16 +9,26 @@
|
|
|
<div class="title">问题图片/视频</div>
|
|
|
<div class="media-box">
|
|
|
<div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
|
|
|
- <img :src="imagePath" alt="" style="object-fit:contain;width:200px;height:200px;border: solid 1px #CCC">
|
|
|
+ <img :src="imagePath" alt="" style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC"
|
|
|
+ @mouseenter="handleOpenPre(imagePath, index)">
|
|
|
+ <div class="cover-box" v-if="isCoverVisible(index)" @mouseleave="handleClosePre(index)">
|
|
|
+ <el-icon :size="40" color="#e6e6e6" style="cursor: pointer;" @click="handlePreview">
|
|
|
+ <ZoomIn />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog v-model="dialogVisible">
|
|
|
+ <img w-full :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref, toRefs, watch } from 'vue';
|
|
|
+import { ZoomIn } from '@element-plus/icons-vue';
|
|
|
|
|
|
const props = defineProps({
|
|
|
showDrawer: Boolean,
|
|
|
@@ -48,6 +58,28 @@ watch(
|
|
|
}
|
|
|
);
|
|
|
|
|
|
+const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const dialogImageUrl = ref('');
|
|
|
+
|
|
|
+const handleOpenPre = (val, index) => {
|
|
|
+ dialogImageUrl.value = val;
|
|
|
+ showPreview.value[index] = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleClosePre = (index) => {
|
|
|
+ showPreview.value[index] = false;
|
|
|
+};
|
|
|
+
|
|
|
+const isCoverVisible = (index) => {
|
|
|
+ return showPreview.value[index];
|
|
|
+};
|
|
|
+
|
|
|
+const handlePreview = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -107,9 +139,22 @@ watch(
|
|
|
display: flex;
|
|
|
|
|
|
.img-box {
|
|
|
+ position: relative;
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
+ .cover-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|