perf: 优化长按菜单位置

This commit is contained in:
kuaifan 2025-04-10 10:47:12 +08:00
parent f5d76fd5ff
commit 19da7a74df
2 changed files with 90 additions and 90 deletions

View File

@ -2,7 +2,7 @@
<div class="page-messenger"> <div class="page-messenger">
<PageTitle :title="$L(tabActive==='dialog' ? '消息' : '通讯录')"/> <PageTitle :title="$L(tabActive==='dialog' ? '消息' : '通讯录')"/>
<div class="messenger-wrapper"> <div class="messenger-wrapper">
<div class="messenger-select"> <div ref="select" class="messenger-select">
<div class="messenger-search"> <div class="messenger-search">
<div class="search-wrapper"> <div class="search-wrapper">
<div class="search-pre"> <div class="search-pre">
@ -164,6 +164,16 @@
{{$L(contactsKey ? `没有任何与"${contactsKey}"相关的结果` : `没有任何联系人`)}} {{$L(contactsKey ? `没有任何与"${contactsKey}"相关的结果` : `没有任何联系人`)}}
</li> </li>
</ul> </ul>
</Scrollbar>
<div class="messenger-menu">
<div class="menu-icon">
<Icon @click="onActive(null)" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
<Badge class="menu-num" :overflow-count="999" :count="msgUnread('all')"/>
</div>
<div class="menu-icon">
<Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
</div>
</div>
<div class="operate-position" :style="operateStyles" v-show="operateVisible"> <div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown <Dropdown
trigger="custom" trigger="custom"
@ -242,16 +252,6 @@
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div> </div>
</Scrollbar>
<div class="messenger-menu">
<div class="menu-icon">
<Icon @click="onActive(null)" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
<Badge class="menu-num" :overflow-count="999" :count="msgUnread('all')"/>
</div>
<div class="menu-icon">
<Icon @click="tabActive='contacts'" :class="{active:tabActive==='contacts'}" type="md-person" />
</div>
</div>
</div> </div>
<div v-if="activeNum > 0 && routeName === 'manage-messenger'" class="messenger-msg"> <div v-if="activeNum > 0 && routeName === 'manage-messenger'" class="messenger-msg">
@ -1060,9 +1060,9 @@ export default {
this.operateVisible = false; this.operateVisible = false;
this.operateItem = $A.isJson(item) ? item : {}; this.operateItem = $A.isJson(item) ? item : {};
this.$nextTick(() => { this.$nextTick(() => {
const parentRect = this.$refs.list?.$el?.getBoundingClientRect() || {top: 0, left: 0} const parentRect = this.$refs.select?.getBoundingClientRect() || {top: 0, left: 0}
this.operateStyles = { this.operateStyles = {
left: `${clientX - parentRect.left}px`, left: `${clientX}px`,
top: `${rect.top + this.windowScrollY - parentRect.top}px`, top: `${rect.top + this.windowScrollY - parentRect.top}px`,
height: rect.height + 'px', height: rect.height + 'px',
} }

View File

@ -519,15 +519,6 @@
} }
} }
} }
.operate-position {
position: fixed;
top: 0;
left: 0;
width: 1px;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
} }
.messenger-menu { .messenger-menu {
display: flex; display: flex;
@ -564,6 +555,15 @@
} }
} }
} }
.operate-position {
position: fixed;
top: 0;
left: 0;
width: 1px;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
} }
.messenger-msg { .messenger-msg {
flex: 1; flex: 1;