github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-02-24 18:30:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化图片选择器

Browse Source
This commit is contained in:
kuaifan 2024-11-12 20:30:54 +08:00
parent 6e0a575da9
commit 02d6dcd592
6 changed files with 395 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
resources/assets/js/components/DropdownMenu.vue
View File

@ -2,15 +2,15 @@
<EDropdown
ref="dropdown"
trigger="click"
class="task-operation-dropdown"
class="general-operation-dropdown"
placement="bottom"
size="small"
:style="styles"
@command="onCommand"
@visible-change="visibleChange">
<div ref="icon" class="task-operation-icon"></div>
<EDropdownMenu ref="dropdownMenu" slot="dropdown" class="task-operation-more-dropdown">
<li class="task-operation-more-warp small">
<div ref="icon" class="general-operation-icon"></div>
<EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown menu-dropdown">
<li class="general-operation-more-warp small">
<ul>
<EDropdownItem
v-for="(item, key) in list"
@ -73,8 +73,8 @@ export default {
this.scrollHide = typeof data.scrollHide === "boolean" ? data.scrollHide : false;
//
this.$refs.icon.focus();
this.updatePopper();
this.show();
this.updatePopper();
this.setupEventListeners(data.event)
} else {
this.hide()
@ -103,7 +103,9 @@ export default {
},
updatePopper() {
this.$nextTick(this.$refs.dropdownMenu.updatePopper)
setTimeout(() => {
this.$refs.dropdownMenu.updatePopper();
}, 0);
},
setupEventListeners(event) {

75
resources/assets/js/components/ImgUpload.vue
View File

@ -2,7 +2,7 @@
<div class="common-img-update">
<div v-if="type !== 'callback'" class="imgcomp-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<div class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + backgroundImage(item.thumb) + ')' }"></div>
<div @click="handleTouch($event, item)" class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + backgroundImage(item.thumb) + ')' }"></div>
<div class="imgcomp-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
@ -13,7 +13,7 @@
</template>
</div>
<div class="add-box" v-bind:class="{ 'callback-add-box': type === 'callback' }">
<div class="add-box-icon">
<div @click="handleTouch($event, null)" class="add-box-icon">
<Icon type="md-add" size="32"></Icon>
</div>
<div class="add-box-upload">
@ -77,21 +77,17 @@
</template>
<script>
import {languageList} from "../language";
export default {
name: 'ImgUpload',
props: {
value: {
},
num: {
},
width: {
},
height: {
},
whcut: {
},
type: {
},
value: {},
num: {},
width: {},
height: {},
whcut: {},
type: {},
http: {
type: Boolean,
default: false
@ -213,6 +209,57 @@
});
return list;
},
handleTouch(event, item) {
if (!this.windowTouch) {
return;
}
const list = [];
if (item === null) {
const subfix = this.type === 'callback' ? '图片' : '';
list.push(...[
{
label: '浏览' + subfix,
value: 'browse'
},
{
label: '上传' + subfix,
value: 'upload'
}
])
} else {
list.push(...[
{
label: '查看',
value: 'view'
},
{
label: '删除',
value: 'trash'
}
])
}
this.$store.state.menuOperation = {
event,
list,
scrollHide: true,
onUpdate: async (act) => {
switch (act) {
case 'browse':
this.browsePicture();
break;
case 'upload':
this.$refs.upload?.handleClick()
break;
case 'view':
this.handleView(item);
break;
case 'trash':
this.handleRemove(item);
break;
}
}
}
},
handleView(item) {
//查看
this.$store.dispatch("previewImage", item.url)

8
resources/assets/js/pages/manage/components/TaskOperation.vue
View File

@ -6,13 +6,13 @@
:disabled="disabled"
:size="size"
:style="styles"
class="task-operation-dropdown"
class="general-operation-dropdown"
placement="bottom"
@command="dropTask"
@visible-change="visibleChange">
<div ref="icon" class="task-operation-icon"></div>
<EDropdownMenu ref="dropdownMenu" slot="dropdown" class="task-operation-more-dropdown">
<li class="task-operation-more-warp" :class="size">
<div ref="icon" class="general-operation-icon"></div>
<EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown">
<li class="general-operation-more-warp" :class="size">
<ul>
<EDropdownItem v-if="!flow" class="load-flow" disabled>
<div class="load-flow-warp">

34
resources/assets/sass/components/img-update.scss vendored
View File

@ -45,6 +45,9 @@
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
flex-direction: row;
align-items: center;
justify-content: center;
}
.imgcomp-upload-list-cover i {
@ -74,7 +77,7 @@
}
.imgcomp-upload-list:hover .imgcomp-upload-list-cover {
display: block;
display: flex;
}
.img-upload-foot {
@ -111,10 +114,11 @@
vertical-align: top;
.add-box-icon {
i {
vertical-align: middle;
padding-bottom: 2px;
}
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.add-box-upload {
@ -132,8 +136,12 @@
height: 22px;
line-height: 22px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.ivu-upload-drag, .ivu-upload-drag:hover {
.ivu-upload-drag,
.ivu-upload-drag:hover {
background: transparent;
border: 0;
border-radius: 0;
@ -260,3 +268,17 @@
background-color: rgba(255, 255, 255, 0.9);
z-index: 1;
}
// 移动端不显示
body.window-touch {
.imgcomp-upload-list:hover .imgcomp-upload-list-cover {
display: none;
}
.add-box:hover {
border-color: #dddee1;
.add-box-upload {
display: none;
}
}
}

2
resources/assets/sass/pages/components/_.scss vendored
View File

@ -4,6 +4,7 @@
@import "dialog-select";
@import "dialog-wrapper";
@import "file-content";
@import "general-operation";
@import "meeting-manager";
@import "project-archived";
@import "project-dialog";
@ -20,7 +21,6 @@
@import "task-deleted";
@import "task-detail";
@import "task-menu";
@import "task-operation";
@import "task-priority";
@import "task-move";
@import "team-management";

9
resources/assets/sass/pages/components/task-operation.scss → resources/assets/sass/pages/components/general-operation.scss vendored
View File

@ -1,4 +1,4 @@
.task-operation-dropdown {
.general-operation-dropdown {
position: absolute;
top: 0;
left: 0;
@ -18,9 +18,9 @@
}
}
.task-operation-more-dropdown {
.general-operation-more-dropdown {
> li {
&.task-operation-more-warp {
&.general-operation-more-warp {
list-style: none;
> ul {
@ -89,16 +89,19 @@
border-color: rgba($flow-status-start-color, 0.1);
color: $flow-status-start-color;
}
&.progress {
background-color: rgba($flow-status-progress-color, 0.1);
border-color: rgba($flow-status-progress-color, 0.1);
color: $flow-status-progress-color;
}
&.test {
background-color: rgba($flow-status-test-color, 0.1);
border-color: rgba($flow-status-test-color, 0.1);
color: $flow-status-test-color;
}
&.end {
background-color: rgba($flow-status-end-color, 0.1);
border-color: rgba($flow-status-end-color, 0.1);