From f37d45b8998ea08a42002579ecc103244bdac17b Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 11:06:56 +0800
Subject: [PATCH] Merge remote-tracking branch 'supervisionVue/hc-dataproduct-v1112' into lsf-dataproduct-1024
---
src/components/FYImageSelectDialog.vue | 40 +++++++++++++++++++++++++++++++++-------
1 files changed, 33 insertions(+), 7 deletions(-)
diff --git a/src/components/FYImageSelectDialog.vue b/src/components/FYImageSelectDialog.vue
index 8eb1bc6..99397d4 100644
--- a/src/components/FYImageSelectDialog.vue
+++ b/src/components/FYImageSelectDialog.vue
@@ -6,7 +6,7 @@
width="66%"
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
@@ -45,8 +45,9 @@
:class="[img.isSelect ? 'selected' : 'noActive', 'image']"
fit="cover"
:src="img.url"
- lazy
@click="onSelect(img, i)"
+ @load="onOneImgLoadSuccess"
+ @error="onOneImgLoadError"
/>
</el-scrollbar>
<el-row v-else justify="space-between">
@@ -57,7 +58,7 @@
</el-dialog>
</template>
<script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
const props = defineProps({
dialogVisible: Boolean,
@@ -94,6 +95,32 @@
const activeId = ref('');
// 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(e) {
+ loadedImgCount.value++;
+}
+function onOneImgLoadSuccess(e) {
+ loadedImgCount.value++;
+}
+watch(
+ () => activeId.value,
+ (nV, oV) => {
+ loadedImgCount.value = 0;
+ },
+ { immediate: true }
+);
function onSelect(img, i) {
if (props.readonly) {
@@ -160,7 +187,7 @@
});
});
},
- { immediate: true }
+ { deep: true, immediate: true }
);
</script>
<style scoped>
@@ -175,12 +202,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;
@@ -251,7 +278,6 @@
}
::v-deep .el-dialog__body {
- height: 60vh;
padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
}
</style>
--
Gitblit v1.9.3