github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-13 20:12:48 +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

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

@ -23,8 +23,9 @@
</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>
<ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'"> <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
<i class="taskfont">&#xe6f8;</i> <i class="taskfont">&#xe6f8;</i>
</li> </li>
@ -34,8 +35,9 @@
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)"> <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"/> <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
</li> </li>
<li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></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'];
if (container) {
const liWidth = container?.querySelector('li')?.offsetWidth || 48; const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0) 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) =>{
const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
if (!isTouchpad) {
event.preventDefault(); event.preventDefault();
container.scrollLeft = container.scrollLeft + event.deltaY; container.scrollLeft = container.scrollLeft + event.deltaY;
}
}); });
}, },

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

@ -562,6 +562,10 @@
} }
} }
} }
.chat-emoji-menu-wrap {
position: relative;
.chat-emoji-menu { .chat-emoji-menu {
width: 376px; width: 376px;
height: 40px; height: 40px;
@ -604,13 +608,18 @@
box-sizing: content-box; 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{