perf: 优化android体验

This commit is contained in:
kuaifan 2024-04-11 08:48:55 +08:00
parent fe5f56e98b
commit 985c5ff54b
5 changed files with 120 additions and 36 deletions

62
resources/assets/js/directives/touchclick.js vendored Executable file
View File

@ -0,0 +1,62 @@
const isSupportTouch = "ontouchend" in document;
export default {
bind (el, binding) {
if (isSupportTouch) {
const touchData = {
move: false,
time: 0,
x: 0,
y: 0,
};
el.__touchEvent__ = {
start: e => {
e.preventDefault();
touchData.move = false;
touchData.time = new Date().getTime();
touchData.x = e.touches ? e.touches[0].clientX : e.clientX;
touchData.y = e.touches ? e.touches[0].clientY : e.clientY;
},
move: e => {
if (touchData.time > 0) {
const x = e.touches ? e.touches[0].clientX : e.clientX;
const y = e.touches ? e.touches[0].clientY : e.clientY;
if (Math.abs(x - touchData.x) > 5 || Math.abs(y - touchData.y) > 5) {
touchData.move = true;
}
}
},
end: _ => {
if (touchData.time > 0) {
if (!touchData.move && new Date().getTime() - touchData.time < 300) {
binding.value();
}
touchData.time = 0;
}
}
};
el.addEventListener('touchstart', el.__touchEvent__.start);
el.addEventListener('touchmove', el.__touchEvent__.move);
el.addEventListener('touchend', el.__touchEvent__.end);
} else {
el.__clickEvent__ = e => {
e.preventDefault();
binding.value();
};
el.addEventListener('click', el.__clickEvent__);
}
},
update () {
},
unbind (el) {
if (isSupportTouch) {
el.removeEventListener('touchstart', el.__touchEvent__.start);
el.removeEventListener('touchmove', el.__touchEvent__.move);
el.removeEventListener('touchend', el.__touchEvent__.end);
delete el.__touchEvent__;
} else {
el.removeEventListener('click', el.__clickEvent__);
delete el.__clickEvent__;
}
}
};

View File

@ -2,30 +2,32 @@ const isSupportTouch = "ontouchend" in document;
export default {
bind (el, binding) {
let isTouch = false;
el.__touchMouseDown__ = e => {
e.preventDefault();
isTouch = true;
binding.value("down", e);
};
el.__touchMouseMove__ = e => {
if (isTouch) {
binding.value("move", e);
}
};
el.__touchMouseUp__ = _ => {
if (isTouch) {
isTouch = false;
binding.value("up");
el.__touchEvent__ = {
start: e => {
e.preventDefault();
isTouch = true;
binding.value("down", e);
},
move: e => {
if (isTouch) {
binding.value("move", e);
}
},
end: _ => {
if (isTouch) {
isTouch = false;
binding.value("up");
}
}
};
if (isSupportTouch) {
el.addEventListener('touchstart', el.__touchMouseDown__);
el.addEventListener('touchmove', el.__touchMouseMove__);
el.addEventListener('touchend', el.__touchMouseUp__);
el.addEventListener('touchstart', el.__touchEvent__.start);
el.addEventListener('touchmove', el.__touchEvent__.move);
el.addEventListener('touchend', el.__touchEvent__.end);
} else {
el.addEventListener('mousedown', el.__touchMouseDown__);
document.addEventListener('mousemove', el.__touchMouseMove__);
document.addEventListener('mouseup', el.__touchMouseUp__);
el.addEventListener('mousedown', el.__touchEvent__.start);
document.addEventListener('mousemove', el.__touchEvent__.move);
document.addEventListener('mouseup', el.__touchEvent__.end);
}
},
update () {
@ -33,16 +35,14 @@ export default {
},
unbind (el) {
if (isSupportTouch) {
el.removeEventListener('touchstart', el.__touchMouseDown__);
el.removeEventListener('touchmove', el.__touchMouseMove__);
el.removeEventListener('touchend', el.__touchMouseUp__);
el.removeEventListener('touchstart', el.__touchEvent__.start);
el.removeEventListener('touchmove', el.__touchEvent__.move);
el.removeEventListener('touchend', el.__touchEvent__.end);
} else {
el.removeEventListener('mousedown', el.__touchMouseDown__);
document.removeEventListener('mousemove', el.__touchMouseMove__);
document.removeEventListener('mouseup', el.__touchMouseUp__);
el.removeEventListener('mousedown', el.__touchEvent__.start);
document.removeEventListener('mousemove', el.__touchEvent__.move);
document.removeEventListener('mouseup', el.__touchEvent__.end);
}
delete el.__touchMouseDown__;
delete el.__touchMouseMove__;
delete el.__touchMouseUp__;
delete el.__touchEvent__;
}
};

View File

@ -153,18 +153,28 @@
eeuiAppSetVariate(key, value) {
if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("eeui").setVariate(key, value);
$A.eeuiModuleSync("eeui").setVariate(key, value);
},
eeuiAppSetHapticBackEnabled(val) {
if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("webview").setHapticBackEnabled(val);
$A.eeuiModuleSync("webview").setHapticBackEnabled(val);
},
eeuiAppSetDisabledUserLongClickSelect(val) {
if (!$A.isEEUiApp) return;
return $A.eeuiModuleSync("webview").setDisabledUserLongClickSelect(val);
$A.__disabledUserLongClickSelectTimer && clearTimeout($A.__disabledUserLongClickSelectTimer);
if (/^\d+$/.test(val)) {
$A.eeuiModuleSync("webview").setDisabledUserLongClickSelect(true);
$A.__disabledUserLongClickSelectTimer = setTimeout(() => {
$A.__disabledUserLongClickSelectTimer = null;
$A.eeuiModuleSync("webview").setDisabledUserLongClickSelect(false);
}, val);
} else {
$A.eeuiModuleSync("webview").setDisabledUserLongClickSelect(val);
}
},
__disabledUserLongClickSelectTimer: null,
eeuiAppCopyText(text) {
if (!$A.isEEUiApp) return;

View File

@ -29,7 +29,7 @@
<div v-if="quoteUpdate" class="quote-label">{{$L('编辑消息')}}</div>
<UserAvatar v-else :userid="quoteData.userid" :userResult="onQuoteUserResult" :show-icon="false" :show-name="true"/>
<div class="quote-desc no-dark-content">{{$A.getMsgSimpleDesc(quoteData)}}</div>
<i class="taskfont" @click.stop="cancelQuote">&#xe6e5;</i>
<i class="taskfont" v-touchclick="cancelQuote">&#xe6e5;</i>
</div>
<!-- 输入框 -->
@ -215,6 +215,7 @@ import Quill from 'quill';
import "quill-mention-hi";
import ChatEmoji from "./emoji";
import touchmouse from "../../../../directives/touchmouse";
import touchclick from "../../../../directives/touchclick";
import TransferDom from "../../../../directives/transfer-dom";
import clickoutside from "../../../../directives/clickoutside";
import longpress from "../../../../directives/longpress";
@ -224,7 +225,7 @@ import {Store} from "le5le-store";
export default {
name: 'ChatInput',
components: {ChatEmoji},
directives: {touchmouse, TransferDom, clickoutside, longpress},
directives: {touchmouse, touchclick, TransferDom, clickoutside, longpress},
props: {
value: {
type: [String, Number],

View File

@ -214,7 +214,7 @@
<div
v-if="scrollTail > 500 || (msgNew > 0 && allMsgs.length > 0)"
class="dialog-goto"
@click="onToBottom">
v-touchclick="onToBottom">
<Badge :overflow-count="999" :count="msgNew">
<i class="taskfont">&#xe72b;</i>
</Badge>
@ -630,7 +630,7 @@ import DialogGroupInfo from "./DialogGroupInfo";
import DialogRespond from "./DialogRespond";
import ChatInput from "./ChatInput";
import VirtualList from 'vue-virtual-scroll-list-hi'
import VirtualList from "vue-virtual-scroll-list-hi"
import {Store} from "le5le-store";
import ImgUpload from "../../../components/ImgUpload.vue";
import {choiceEmojiOne} from "./ChatInput/one";
@ -640,6 +640,7 @@ import UserSelect from "../../../components/UserSelect.vue";
import UserAvatarTip from "../../../components/UserAvatar/tip.vue";
import DialogGroupWordChain from "./DialogGroupWordChain";
import DialogGroupVote from "./DialogGroupVote";
import touchclick from "../../../directives/touchclick";
export default {
name: "DialogWrapper",
@ -658,6 +659,7 @@ export default {
DialogGroupWordChain,
DialogGroupVote,
},
directives: {touchclick},
props: {
dialogId: {
@ -1427,6 +1429,12 @@ export default {
readLoadNum() {
this.positionShow = true
},
operateVisible(val) {
if (!val) {
document.getSelection().removeAllRanges();
}
},
},
methods: {
@ -1958,6 +1966,9 @@ export default {
},
onTouchStart(e) {
if ($A.isAndroid() && $A.eeuiAppKeyboardStatus()) {
$A.eeuiAppSetDisabledUserLongClickSelect(500);
}
this.wrapperStart = null;
if (this.selectedTextStatus) {
this.wrapperStart = window.scrollY