mirror of
https://github.com/kuaifan/dootask.git
synced 2026-03-07 18:07:05 +00:00
perf: 优化图片浏览
This commit is contained in:
kuaifan
parent
ecb721292d
commit
5f009ddbee
@ -46,7 +46,7 @@
|
||||
</div>
|
||||
<Modal :title="$L('浏览图片空间')" v-model="browseVisible" class="img-upload-modal" width="710">
|
||||
<div class="browse-load" v-if="isLoading">{{$L('加载中...')}}</div>
|
||||
<div class="browse-list" :class="httpType==='input'?'browse-list-disabled':''" ref="browselistbox">
|
||||
<div class="browse-list" v-else :class="httpType==='input'?'browse-list-disabled':''" ref="browselistbox">
|
||||
<div v-if="browseList.length <= 0">{{$L('无内容')}}</div>
|
||||
<div v-else class="browse-item" v-for="item in browseList" @click="browseItem(item)">
|
||||
<Icon v-if="item.active" class="browse-icon" type="ios-checkmark-circle"></Icon>
|
||||
@ -217,8 +217,9 @@
|
||||
},
|
||||
handleView (item) {
|
||||
//查看
|
||||
this.visible = true;
|
||||
this.imgVisible = item.url;
|
||||
this.$store.dispatch("previewImage", item.url)
|
||||
// this.visible = true;
|
||||
// this.imgVisible = item.url;
|
||||
},
|
||||
handleRemove (item) {
|
||||
//删除
|
||||
|
||||
@ -23,8 +23,7 @@ export default {
|
||||
watch: {
|
||||
show(v) {
|
||||
if (v) {
|
||||
this.$store.state.previewImageIndex = Math.max(this.$store.state.previewImageIndex, 0)
|
||||
this.$store.state.previewImageIndex = Math.min(this.$store.state.previewImageIndex, this.$store.state.previewImageList.length - 1)
|
||||
this.$store.state.previewImageIndex = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
|
||||
} else {
|
||||
this.$store.state.previewImageIndex = 0;
|
||||
this.$store.state.previewImageList = [];
|
||||
@ -33,9 +32,8 @@ export default {
|
||||
previewImageList(l) {
|
||||
if (l.length > 0) {
|
||||
if ($A.isEEUiApp) {
|
||||
let position = Math.max(this.$store.state.previewImageIndex, 0)
|
||||
position = Math.min(position, this.$store.state.previewImageList.length - 1)
|
||||
let paths = l.map(item => {
|
||||
const position = Math.min(Math.max(this.$store.state.previewImageIndex, 0), this.$store.state.previewImageList.length - 1)
|
||||
const paths = l.map(item => {
|
||||
if ($A.isJson(item)) {
|
||||
return $A.rightDelete(item.src, "_thumb.jpg");
|
||||
}
|
||||
|
||||
@ -333,8 +333,7 @@
|
||||
if (imgElm && imgElm.nodeName === "IMG") {
|
||||
index = array.findIndex(item => item.src === imgElm.getAttribute("src"));
|
||||
}
|
||||
this.$store.state.previewImageIndex = index;
|
||||
this.$store.state.previewImageList = array;
|
||||
this.$store.dispatch("previewImage", {index, list: array})
|
||||
}
|
||||
});
|
||||
editor.ui.registry.addButton('uploadFiles', {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
|
||||
<div class="dialog-block">
|
||||
<div class="dialog-avatar">
|
||||
<div class="dialog-avatar" @click="onViewAvatar">
|
||||
<template v-if="dialogData.type=='group'">
|
||||
<EAvatar v-if="dialogData.avatar" class="img-avatar" :src="dialogData.avatar" :size="42"></EAvatar>
|
||||
<i v-else-if="dialogData.group_type=='department'" class="taskfont icon-avatar department"></i>
|
||||
@ -2226,8 +2226,7 @@ export default {
|
||||
if (target.classList.contains('browse')) {
|
||||
this.onViewPicture(target.currentSrc);
|
||||
} else {
|
||||
this.$store.state.previewImageIndex = 0;
|
||||
this.$store.state.previewImageList = $A.getTextImagesInfo(target.outerHTML);
|
||||
this.$store.dispatch("previewImage", $A.getTextImagesInfo(target.outerHTML))
|
||||
}
|
||||
break;
|
||||
|
||||
@ -2310,11 +2309,9 @@ export default {
|
||||
//
|
||||
const index = list.findIndex(({src}) => src === currentUrl);
|
||||
if (index > -1) {
|
||||
this.$store.state.previewImageIndex = index;
|
||||
this.$store.state.previewImageList = list;
|
||||
this.$store.dispatch("previewImage", {index, list})
|
||||
} else {
|
||||
this.$store.state.previewImageIndex = 0;
|
||||
this.$store.state.previewImageList = [currentUrl];
|
||||
this.$store.dispatch("previewImage", currentUrl)
|
||||
}
|
||||
},
|
||||
|
||||
@ -2628,6 +2625,18 @@ export default {
|
||||
img.src = url;
|
||||
})
|
||||
},
|
||||
|
||||
onViewAvatar(e) {
|
||||
let src = null
|
||||
if (e.target.tagName === "IMG") {
|
||||
src = e.target.src
|
||||
} else {
|
||||
src = $A(e.target).find("img").attr("src")
|
||||
}
|
||||
if (src) {
|
||||
this.$store.dispatch("previewImage", src)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -33,8 +33,7 @@ export default {
|
||||
}
|
||||
data = $A.jsonParse(data);
|
||||
if (data.source === 'fileView' && data.action === 'picture') {
|
||||
this.$store.state.previewImageIndex = data.params.index;
|
||||
this.$store.state.previewImageList = data.params.array;
|
||||
this.$store.dispatch("previewImage", {index: data.params.index, list: data.params.array})
|
||||
}
|
||||
this.$emit("on-message", data)
|
||||
},
|
||||
|
||||
@ -1454,21 +1454,23 @@ export default {
|
||||
const list = this.fileList.filter(item => ['jpg', 'jpeg', 'gif', 'png'].includes(item.ext))
|
||||
const index = list.findIndex(item => item.id === file.id);
|
||||
if (index > -1) {
|
||||
this.$store.state.previewImageIndex = index;
|
||||
this.$store.state.previewImageList = list.map(item => {
|
||||
return {
|
||||
src: item.path,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
}
|
||||
});
|
||||
this.$store.dispatch("previewImage", {
|
||||
index, list: list.map(item => {
|
||||
return {
|
||||
src: item.path,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.$store.state.previewImageIndex = 0;
|
||||
this.$store.state.previewImageList = [{
|
||||
src: file.path,
|
||||
width: file.width,
|
||||
height: file.height,
|
||||
}];
|
||||
this.$store.dispatch("previewImage", {
|
||||
index: 0, list: [{
|
||||
src: file.path,
|
||||
width: file.width,
|
||||
height: file.height,
|
||||
}]
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
13
resources/assets/js/store/actions.js
vendored
13
resources/assets/js/store/actions.js
vendored
@ -2677,6 +2677,19 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 预览图片
|
||||
* @param state
|
||||
* @param data
|
||||
*/
|
||||
previewImage({state}, data) {
|
||||
if (!$A.isJson(data)) {
|
||||
data = {index:0, list: [data]}
|
||||
}
|
||||
state.previewImageIndex = data.index;
|
||||
state.previewImageList = data.list;
|
||||
},
|
||||
|
||||
/** *****************************************************************************************/
|
||||
/** *********************************** websocket *******************************************/
|
||||
/** *****************************************************************************************/
|
||||
|
||||
@ -192,8 +192,10 @@
|
||||
}
|
||||
|
||||
.browse-load {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
.browse-list {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user