| | |
|---|
| | | <template> |
|---|
| | | <el-dialog |
|---|
| | | :title="title" |
|---|
| | | :model-value="dialogVisible" |
|---|
| | | @opened="$emit('update:dialogVisible', true)" |
|---|
| | | @closed="$emit('update:dialogVisible', false)" |
|---|
| | | 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 |
|---|
| | |
|---|
| | | 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" |
|---|
| | | > |
|---|
| | |
|---|
| | | :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"> |
|---|
| | |
|---|
| | | </el-dialog> |
|---|
| | | </template> |
|---|
| | | <script setup> |
|---|
| | | import { ref, watch } from 'vue'; |
|---|
| | | import { ref, watch, computed } from 'vue'; |
|---|
| | | |
|---|
| | | const props = defineProps({ |
|---|
| | | // 标题 |
|---|
| | | title: String, |
|---|
| | | dialogVisible: Boolean, |
|---|
| | | /** |
|---|
| | | * 图片分类 |
|---|
| | |
|---|
| | | 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) { |
|---|
| | |
|---|
| | | }); |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | { immediate: true } |
|---|
| | | { deep: true, immediate: true } |
|---|
| | | ); |
|---|
| | | </script> |
|---|
| | | <style scoped> |
|---|
| | |
|---|
| | | |
|---|
| | | .main { |
|---|
| | | margin: 0 auto; /* 使父元素居中 */ |
|---|
| | | height: 100%; |
|---|
| | | height: 72vh; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .imgs { |
|---|
| | | height: 50vh; |
|---|
| | | height: 60vh; |
|---|
| | | width: 100%; |
|---|
| | | min-height: 100px !important; |
|---|
| | | /* border-style:solid; |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | ::v-deep .el-dialog__body { |
|---|
| | | height: 60vh; |
|---|
| | | padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important; |
|---|
| | | } |
|---|
| | | </style> |
|---|
