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:
Pang 2023-08-09 00:42:45 +08:00
parent 00050c9c6b
commit 3971c63dda
2 changed files with 28 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
resources/assets/js/pages/manage/components/ChatInput/index.vue
View File

@ -10,7 +10,7 @@
placement="top-end" placement="top-end"
popperClass="chat-quick-emoji-popover"> popperClass="chat-quick-emoji-popover">
<div slot="reference"></div> <div slot="reference"></div>
<ul class="chat-quick-emoji-wrapper"> <ul ref="emojiWrapper" class="chat-quick-emoji-wrapper scrollbar-hidden">
<li v-for="item in emojiQuickItems" @click="onEmojiQuick(item)"> <li v-for="item in emojiQuickItems" @click="onEmojiQuick(item)">
<img :title="item.name" :alt="item.name" :src="item.src"/> <img :title="item.name" :alt="item.name" :src="item.src"/>
</li> </li>
@ -18,7 +18,7 @@
</EPopover> </EPopover>
</div> </div>
<div class="chat-input-wrapper" @click.stop="focus"> <div ref="inputWrapper" class="chat-input-wrapper" @click.stop="focus">
<!-- 回复、修改 --> <!-- 回复、修改 -->
<div v-if="quoteData" class="chat-quote"> <div v-if="quoteData" class="chat-quote">
<div v-if="quoteUpdate" class="quote-label">{{$L('编辑消息')}}</div> <div v-if="quoteUpdate" class="quote-label">{{$L('编辑消息')}}</div>
@ -894,25 +894,30 @@ export default {
this.emojiQuickItems = []; this.emojiQuickItems = [];
const baseUrl = $A.apiUrl("../images/emoticon") const baseUrl = $A.apiUrl("../images/emoticon")
window.emoticonData.some(data => { window.emoticonData.some(data => {
const item = data.list.find(d => { let j = 0
const ks = [d.name] data.list.some(item => {
if (d.key) { const arr = [item.name]
ks.push(...(`${d.key}`).split(" ")) if (item.key) {
arr.push(...(`${item.key}`).split(" "))
} }
return ks.includes(text) if (arr.includes(text)) {
})
if (item) {
this.emojiQuickItems.push(Object.assign(item, { this.emojiQuickItems.push(Object.assign(item, {
type: `emoticon`, type: `emoticon`,
asset: `images/emoticon/${data.path}/${item.path}`, asset: `images/emoticon/${data.path}/${item.path}`,
name: item.name,
src: `${baseUrl}/${data.path}/${item.path}` src: `${baseUrl}/${data.path}/${item.path}`
})) }))
if (this.emojiQuickItems.length >= 3) { if (++j >= 2) {
return true return true
} }
} }
})
if (this.emojiQuickItems.length >= 20) {
return true
}
}); });
if (this.emojiQuickItems.length > 0) { if (this.emojiQuickItems.length > 0) {
this.$refs.emojiWrapper.style.maxWidth = `${this.$refs.inputWrapper.clientWidth}px`
this.$nextTick(_ => { this.$nextTick(_ => {
this.emojiQuickShow = true this.emojiQuickShow = true
this.$refs.emojiQuickRef.updatePopper() this.$refs.emojiQuickRef.updatePopper()

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

@ -203,6 +203,10 @@
.ql-bubble { .ql-bubble {
.ql-tooltip { .ql-tooltip {
z-index: 1; z-index: 1;
.ql-formats {
display: flex;
align-items: center;
}
} }
} }
@ -534,7 +538,10 @@
} }
.chat-quick-emoji-wrapper { .chat-quick-emoji-wrapper {
display: flex; display: flex;
overflow-y: hidden;
overflow-x: auto;
> li { > li {
flex-shrink: 0;
width: 90px; width: 90px;
height: 90px; height: 90px;
display: flex; display: flex;