mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-12 19:35:50 +00:00
perf: 图片浏览
This commit is contained in:
parent
18e1240775
commit
bc85da49e3
@ -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({
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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})
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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('点击查看'))])
|
||||||
|
|||||||
@ -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) {
|
||||||
|
|||||||
@ -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,
|
||||||
|
|||||||
20
resources/assets/js/store/actions.js
vendored
20
resources/assets/js/store/actions.js
vendored
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user