From 87958d6d33603fa673cb7c8f5caf2394689959bf Mon Sep 17 00:00:00 2001
From: hcong <1050828145@qq.com>
Date: 星期四, 21 十一月 2024 11:00:43 +0800
Subject: [PATCH] 1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除
---
src/components/FYImageSelectDialog.vue | 131 +++++++++++++++++++++++++++++++++----------
1 files changed, 100 insertions(+), 31 deletions(-)
diff --git a/src/components/FYImageSelectDialog.vue b/src/components/FYImageSelectDialog.vue
index 744b866..6816f4c 100644
--- a/src/components/FYImageSelectDialog.vue
+++ b/src/components/FYImageSelectDialog.vue
@@ -1,13 +1,12 @@
<template>
<el-dialog
:model-value="dialogVisible"
- @opened="$emit('update:dialogVisible', true)"
- @closed="$emit('update:dialogVisible', false)"
+ @opened="handleOpen"
+ @closed="handleClose"
width="66%"
- title="浠绘剰鍥剧墖"
destroy-on-close
>
- <div class="main">
+ <div class="main" v-loading="loading">
<el-row justify="end" v-if="!readonly">
<el-text size="small" type="info" class="m-r-8"
>鏈�澶氶�夋嫨{{ maxSelect }}寮犲浘鐗�</el-text
@@ -30,7 +29,7 @@
v-for="item in typeList"
:key="item.typeId"
:label="
- item.typeName + ' (' + typeImgMap.get(activeId).length + ')'
+ item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
"
:name="item.typeId"
>
@@ -41,13 +40,15 @@
class="imgs"
>
<el-image
+ v-loading="img.loading"
v-for="(img, i) in typeImgMap.get(activeId)"
:key="i"
:class="[img.isSelect ? 'selected' : 'noActive', 'image']"
fit="cover"
:src="img.url"
- lazy
@click="onSelect(img, i)"
+ @load="onOneImgLoadSuccess(img)"
+ @error="onOneImgLoadError(img)"
/>
</el-scrollbar>
<el-row v-else justify="space-between">
@@ -58,7 +59,7 @@
</el-dialog>
</template>
<script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
const props = defineProps({
dialogVisible: Boolean,
@@ -96,6 +97,34 @@
// const typeImgMap = ref(new Map());
const selectedImgUrlList = ref([]);
+let loadedImgCount = ref(0);
+// 鍔犺浇鐘舵��
+const loading = computed(() => {
+ if (activeId.value == '') {
+ return false;
+ }
+ // 淇濊瘉鏈�寮�濮嬫槸鍔犺浇鐘舵�侊紝涓夊垎涔嬩竴鍔犺浇涔嬪悗鍋滄灞曠ず鍔犺浇鐘舵��
+ return !(
+ props.typeImgMap.get(activeId.value).length / 3 <=
+ loadedImgCount.value
+ );
+});
+function onOneImgLoadError(img) {
+ img.loading = false
+ loadedImgCount.value++;
+}
+function onOneImgLoadSuccess(img) {
+ img.loading = false
+ loadedImgCount.value++;
+}
+watch(
+ () => activeId.value,
+ (nV, oV) => {
+ loadedImgCount.value = 0;
+ },
+ { immediate: true }
+);
+
function onSelect(img, i) {
if (props.readonly) {
return;
@@ -122,7 +151,28 @@
img.isSelect = false;
}
}
-
+function handleOpen() {
+ // if (props.typeImgMap.get(activeId.value) == undefined) {
+ // return;
+ // }
+ // props.typeImgMap.get(activeId.value).forEach((i) => {
+ // if (i.isSelect == true) {
+ // return;
+ // }
+ // props.defaultFile.forEach((imgItem) => {
+ // if (imgItem.url == i.url) {
+ // i.isSelect = true;
+ // selectedImgUrlList.value.push(i);
+ // }
+ // });
+ // });
+ emit('update:dialogVisible', true)
+}
+function handleClose() {
+ selectedImgUrlList.value.forEach(item => item.isSelect = false)
+ selectedImgUrlList.value = []
+ emit('update:dialogVisible', false)
+}
function handleSubmit() {
emit('submit', selectedImgUrlList.value);
emit('update:dialogVisible', false);
@@ -142,27 +192,47 @@
},
{ immediate: true }
);
+// watch(
+// () => props.defaultFile,
+// (nV, oV) => {
+// if (props.typeImgMap.get(activeId.value) == undefined) {
+// return;
+// }
+// props.typeImgMap.get(activeId.value).forEach((i) => {
+// if (i.isSelect == true) {
+// return;
+// }
+// nV.forEach((imgItem) => {
+// if (imgItem.url == i.url) {
+// i.isSelect = true;
+// selectedImgUrlList.value.push(i);
+// }
+// });
+// });
+// },
+// { deep: true, immediate: true }
+// );
-watch(
- () => props.typeImgMap,
- (newMap, oldMap) => {
- if (newMap.get(activeId.value) == undefined) {
- return;
- }
- newMap.get(activeId.value).forEach((i) => {
- if (i.isSelect == true) {
- return;
- }
- props.defaultFile.forEach((imgItem) => {
- if (imgItem.url == i.url) {
- i.isSelect = true;
- selectedImgUrlList.value.push(i);
- }
- });
- });
- },
- { immediate: true }
-);
+// watch(
+// () => props.typeImgMap,
+// (newMap, oldMap) => {
+// if (newMap.get(activeId.value) == undefined) {
+// return;
+// }
+// newMap.get(activeId.value).forEach((i) => {
+// if (i.isSelect == true) {
+// return;
+// }
+// props.defaultFile.forEach((imgItem) => {
+// if (imgItem.url == i.url) {
+// i.isSelect = true;
+// selectedImgUrlList.value.push(i);
+// }
+// });
+// });
+// },
+// { immediate: true }
+// );
</script>
<style scoped>
.center {
@@ -176,12 +246,12 @@
.main {
margin: 0 auto; /* 浣跨埗鍏冪礌灞呬腑 */
- height: 100%;
+ height: 72vh;
width: 100%;
}
.imgs {
- height: 50vh;
+ height: 60vh;
width: 100%;
min-height: 100px !important;
/* border-style:solid;
@@ -252,7 +322,6 @@
}
::v-deep .el-dialog__body {
- height: 60vh;
padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
}
</style>
--
Gitblit v1.9.3