github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-13 12:02:51 +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> </ul>
</Scrollbar> </Scrollbar>
</div> </div>
<ul v-if="!onlyEmoji" ref="chatEmojiMenuRef" class="chat-emoji-menu" :style="chatEmojiMenuStyle" @scroll="onHandleScroll"> <div v-if="!onlyEmoji" class="chat-emoji-menu-wrap">
<li v-if="showEmojiMenuScrollLeftBtn" @click="onEmojiMenuScroll('left')" class="left-btn"><i class="taskfont">&#xe72d;</i></li> <span v-show="showEmojiMenuScrollLeftBtn" class="left-btn" @click="onEmojiMenuScroll('left')" style="position: absolute; left: 0; bottom: 0;"><i class="taskfont">&#xe72d;</i></span>
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'"> <ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
<i class="taskfont">&#xe6f8;</i> <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
</li> <i class="taskfont">&#xe6f8;</i>
<li :class="{active: type === 'emoji'}" @click="type='emoji'"> </li>
<span class="no-dark-content">&#128512;</span> <li :class="{active: type === 'emoji'}" @click="type='emoji'">
</li> <span class="no-dark-content">&#128512;</span>
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)"> </li>
<Imgs :title="item.name" :alt="item.name" :src="item.src"/> <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
</li> <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
<li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></li> </li>
</ul> </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> </div>
</template> </template>
@ -115,19 +117,16 @@ export default {
} }
return []; return [];
}, },
chatEmojiMenuStyle() {
return {
paddingLeft: this.showEmojiMenuScrollLeftBtn ? '34px' : 0,
paddingRight: this.showEmojiMenuScrollRightBtn ? '34px' : 0,
}
},
showEmojiMenuScrollLeftBtn(){ showEmojiMenuScrollLeftBtn(){
return this.emojiMenuScrollLeft > 34 return this.emojiMenuScrollLeft > 34
}, },
showEmojiMenuScrollRightBtn(){ showEmojiMenuScrollRightBtn(){
const container = this.$refs['chatEmojiMenuRef']; const container = this.$refs['chatEmojiMenuRef'];
const liWidth = container?.querySelector('li')?.offsetWidth || 48; if (container) {
return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0) const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < (container.scrollWidth - container.clientWidth - liWidth);
}
return this.emojiMenuScrollLeft <= 100;
} }
}, },
methods: { methods: {
@ -226,8 +225,11 @@ export default {
onMonitorWheel() { onMonitorWheel() {
const container = this.$refs['chatEmojiMenuRef']; const container = this.$refs['chatEmojiMenuRef'];
container?.addEventListener("wheel", (event) =>{ container?.addEventListener("wheel", (event) =>{
event.preventDefault(); const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
container.scrollLeft = container.scrollLeft + event.deltaY; 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 { .chat-emoji-menu-wrap {
display: none; position: relative;
}
> li { .chat-emoji-menu {
list-style: none; width: 376px;
cursor: pointer; height: 40px;
line-height: 40px;
background-color: #f2f4f7;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; overflow: auto;
&.active { &::-webkit-scrollbar {
background-color: #fff; display: none;
} }
> span { > li {
padding: 0 13px; list-style: none;
font-size: 22px; cursor: pointer;
} display: flex;
align-items: center;
height: 100%;
> i { &.active {
width: 48px; background-color: #fff;
font-size: 18px; }
text-align: center;
}
> img { > span {
width: 24px; padding: 0 13px;
height: 24px; font-size: 22px;
padding: 0 12px; }
box-sizing: content-box;
> 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{ .left-btn,.right-btn{
position: absolute !important; position: absolute;
height: 40px; height: 100%;
background: #f2f4f7 !important; background: #f2f4f7 !important;
width: 34px; width: 34px;
z-index: 3; z-index: 3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
} }
.left-btn{ .left-btn{