perf: 图片浏览

This commit is contained in:
kuaifan 2024-11-07 01:44:42 +08:00
parent 18e1240775
commit bc85da49e3
11 changed files with 38 additions and 32 deletions

View File

@ -59,9 +59,6 @@ export default {
this.lightbox?.destroy(); this.lightbox?.destroy();
const dataSource = array.map(item => { const dataSource = array.map(item => {
if ($A.isJson(item)) { if ($A.isJson(item)) {
if (item.src) {
item.src = $A.thumbRestore(item.src);
}
if (parseInt(item.width) > 0 && parseInt(item.height) > 0) { if (parseInt(item.width) > 0 && parseInt(item.height) > 0) {
return item return item
} }
@ -69,7 +66,7 @@ export default {
} }
htmlZoom = true; htmlZoom = true;
return { return {
html: `<div class="preview-image-swipe"><img src="${$A.thumbRestore(item)}"/></div>`, html: `<div class="preview-image-swipe"><img src="${item}"/></div>`,
} }
}) })
this.lightbox = new PhotoSwipeLightbox({ this.lightbox = new PhotoSwipeLightbox({

View File

@ -218,7 +218,7 @@ export default {
if ($A.isJson(item)) { if ($A.isJson(item)) {
item = item.src; item = item.src;
} }
return $A.thumbRestore(item); return item;
}, },
imgStyle() { imgStyle() {
const {scale, deg, offsetX, offsetY, enableTransition} = this.transform; const {scale, deg, offsetX, offsetY, enableTransition} = this.transform;

View File

@ -35,9 +35,9 @@ export default {
let position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1) let position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
let paths = l.map(item => { let paths = l.map(item => {
if ($A.isJson(item)) { if ($A.isJson(item)) {
return $A.thumbRestore(item.src); return item.src;
} }
return $A.thumbRestore(item) return item
}) })
let max = 50; let max = 50;
if (paths.length > max) { if (paths.length > max) {

View File

@ -614,8 +614,7 @@ export default {
$A.messageWarning("没有可预览的图片") $A.messageWarning("没有可预览的图片")
return; return;
} }
let index = Math.max(0, array.findIndex(item => item.src === this.operateImg)); this.$store.dispatch("previewImage", {index: this.operateImg, list: array})
this.$store.dispatch("previewImage", {index, list: array})
}, },
addClickEvent({target}, isFull) { addClickEvent({target}, isFull) {

View File

@ -303,8 +303,7 @@ export default {
$A.messageWarning("没有可预览的图片") $A.messageWarning("没有可预览的图片")
return; return;
} }
let index = Math.max(0, array.findIndex(item => item.src === this.operateMenu.img)); this.$store.dispatch("previewImage", {index: this.operateMenu.img, list: array})
this.$store.dispatch("previewImage", {index, list: array})
}, },
} }
} }

View File

@ -79,8 +79,7 @@ export default {
if (list.length === 0) { if (list.length === 0) {
return return
} }
const index = Math.max(0, list.indexOf(target.src)) this.$store.dispatch("previewImage", {index: target.src, list})
this.$store.dispatch("previewImage", {index, list})
} }
} }
} }

View File

@ -509,8 +509,7 @@ export default {
src: $A.mainUrl(src) src: $A.mainUrl(src)
} }
}); });
const index = list.findIndex(({src}) => src === $A.mainUrl(currentUrl)); this.$store.dispatch("previewImage", {index: $A.mainUrl(currentUrl), list})
this.$store.dispatch("previewImage", {index, list})
}, },
// //
onAvatar(userid) { onAvatar(userid) {

View File

@ -168,7 +168,7 @@ export default {
}, },
on: { on: {
click: () => { click: () => {
this.$store.dispatch("previewImage", { index: 0, list }) this.$store.dispatch("previewImage", {index: 0, list})
} }
} }
}, [h('AutoTip', this.$L('点击查看'))]) }, [h('AutoTip', this.$L('点击查看'))])

View File

@ -3177,8 +3177,7 @@ export default {
this.onViewPicture(target.currentSrc); this.onViewPicture(target.currentSrc);
} else { } else {
const list = $A.getTextImagesInfo(el.outerHTML) const list = $A.getTextImagesInfo(el.outerHTML)
const index = list.findIndex(item => item.src == target.currentSrc) this.$store.dispatch("previewImage", {index: target.currentSrc, list})
this.$store.dispatch("previewImage", {index, list})
} }
break; break;
@ -3263,9 +3262,12 @@ export default {
const {msg} = data; const {msg} = data;
if (msg.ext === 'mp4') { if (msg.ext === 'mp4') {
this.$store.dispatch("previewImage", { this.$store.dispatch("previewImage", {
index: 0,
list: [{
src: msg.path, src: msg.path,
width: msg.width, width: msg.width,
height: msg.height, height: msg.height,
}]
}) })
return return
} }
@ -3330,12 +3332,7 @@ export default {
} }
}) })
// //
const index = list.findIndex(({src}) => src === currentUrl); this.$store.dispatch("previewImage", {index: currentUrl, list})
if (index > -1) {
this.$store.dispatch("previewImage", {index, list})
} else {
this.$store.dispatch("previewImage", currentUrl)
}
}, },
onDownFile(data) { onDownFile(data) {

View File

@ -1671,7 +1671,8 @@ export default {
const index = list.findIndex(item => item.id === file.id); const index = list.findIndex(item => item.id === file.id);
if (index > -1) { if (index > -1) {
this.$store.dispatch("previewImage", { this.$store.dispatch("previewImage", {
index, list: list.map(item => { index,
list: list.map(item => {
return { return {
src: item.path, src: item.path,
width: item.width, width: item.width,
@ -1681,7 +1682,8 @@ export default {
}) })
} else { } else {
this.$store.dispatch("previewImage", { this.$store.dispatch("previewImage", {
index: 0, list: [{ index: 0,
list: [{
src: file.path, src: file.path,
width: file.width, width: file.width,
height: file.height, height: file.height,

View File

@ -3487,11 +3487,25 @@ export default {
/** /**
* 预览图片 * 预览图片
* @param state * @param state
* @param data * @param data {{index: number | string, list: array} | string}
*/ */
previewImage({state}, data) { previewImage({state}, data) {
if (!$A.isJson(data) || !$A.isArray(data.list)) { if (!$A.isJson(data)) {
data = {index:0, list: [data]} data = {index: 0, list: [data]}
}
data.list = data.list.map(item => {
if ($A.isJson(item)) {
item.src = $A.thumbRestore(item.src)
} else {
item = $A.thumbRestore(item)
}
return item
})
if (typeof data.index === "string") {
const current = $A.thumbRestore(data.index)
data.index = Math.max(0, data.list.findIndex(item => {
return $A.isJson(item) ? item.src == current : item == current
}))
} }
state.previewImageIndex = data.index; state.previewImageIndex = data.index;
state.previewImageList = data.list; state.previewImageList = data.list;