github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化表情滚动条

Browse Source
This commit is contained in:
weifashi 2024-11-21 23:56:22 +08:00
parent 8f622dd6a5
commit d34bff28c5
2 changed files with 67 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/assets/js/pages/manage/components/ChatInput/emoji.vue
View File

@ -23,19 +23,21 @@
</ul>
</Scrollbar>
</div>
<ul v-if="!onlyEmoji" ref="chatEmojiMenuRef" class="chat-emoji-menu" :style="chatEmojiMenuStyle" @scroll="onHandleScroll">
<li v-if="showEmojiMenuScrollLeftBtn" @click="onEmojiMenuScroll('left')" class="left-btn"><i class="taskfont">&#xe72d;</i></li>
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
<i class="taskfont">&#xe6f8;</i>
</li>
<li :class="{active: type === 'emoji'}" @click="type='emoji'">
<span class="no-dark-content">&#128512;</span>
</li>
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
<Imgs :title="item.name" :alt="item.name" :src="item.src"/>
</li>
<li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></li>
</ul>
<div v-if="!onlyEmoji" class="chat-emoji-menu-wrap">
<span v-show="showEmojiMenuScrollLeftBtn" class="left-btn" @click="onEmojiMenuScroll('left')" style="position: absolute; left: 0; bottom: 0;"><i class="taskfont">&#xe72d;</i></span>
<ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
<i class="taskfont">&#xe6f8;</i>
</li>
<li :class="{active: type === 'emoji'}" @click="type='emoji'">
<span class="no-dark-content">&#128512;</span>
</li>
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
<Imgs :title="item.name" :alt="item.name" :src="item.src"/>
</li>
</ul>
<span v-show="showEmojiMenuScrollRightBtn" class="right-btn" @click="onEmojiMenuScroll('right')" style="position: absolute; right: 0; bottom: 0;"><i class="taskfont">&#xe733;</i></span>
</div>
</div>
</template>
@ -115,19 +117,16 @@ export default {
}
return [];
},
chatEmojiMenuStyle() {
return {
paddingLeft: this.showEmojiMenuScrollLeftBtn ? '34px' : 0,
paddingRight: this.showEmojiMenuScrollRightBtn ? '34px' : 0,
}
},
showEmojiMenuScrollLeftBtn(){
return this.emojiMenuScrollLeft > 34
},
showEmojiMenuScrollRightBtn(){
const container = this.$refs['chatEmojiMenuRef'];
const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0)
if (container) {
const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < (container.scrollWidth - container.clientWidth - liWidth);
}
return this.emojiMenuScrollLeft <= 100;
}
},
methods: {
@ -226,8 +225,11 @@ export default {
onMonitorWheel() {
const container = this.$refs['chatEmojiMenuRef'];
container?.addEventListener("wheel", (event) =>{
event.preventDefault();
container.scrollLeft = container.scrollLeft + event.deltaY;
const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
if (!isTouchpad) {
event.preventDefault();
container.scrollLeft = container.scrollLeft + event.deltaY;
}
});
},

75
resources/assets/sass/pages/components/chat-input.scss vendored
View File

@ -562,55 +562,64 @@
}
}
}
.chat-emoji-menu {
width: 376px;
height: 40px;
line-height: 40px;
background-color: #f2f4f7;
display: flex;
align-items: center;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.chat-emoji-menu-wrap {
position: relative;
> li {
list-style: none;
cursor: pointer;
.chat-emoji-menu {
width: 376px;
height: 40px;
line-height: 40px;
background-color: #f2f4f7;
display: flex;
align-items: center;
height: 100%;
overflow: auto;
&.active {
background-color: #fff;
&::-webkit-scrollbar {
display: none;
}
> span {
padding: 0 13px;
font-size: 22px;
}
> li {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
height: 100%;
> i {
width: 48px;
font-size: 18px;
text-align: center;
}
&.active {
background-color: #fff;
}
> img {
width: 24px;
height: 24px;
padding: 0 12px;
box-sizing: content-box;
> span {
padding: 0 13px;
font-size: 22px;
}
> i {
width: 48px;
font-size: 18px;
text-align: center;
}
> img {
width: 24px;
height: 24px;
padding: 0 12px;
box-sizing: content-box;
}
}
}
.left-btn,.right-btn{
position: absolute !important;
height: 40px;
position: absolute;
height: 100%;
background: #f2f4f7 !important;
width: 34px;
z-index: 3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.left-btn{