mirror of
https://github.com/kuaifan/dootask.git
synced 2026-02-05 12:45:41 +00:00
perf: 优化长按菜单位置
This commit is contained in:
parent
f5d76fd5ff
commit
19da7a74df
@ -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',
|
||||||
}
|
}
|
||||||
|
|||||||
18
resources/assets/sass/pages/page-messenger.scss
vendored
18
resources/assets/sass/pages/page-messenger.scss
vendored
@ -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;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user