feat：聊天表情包 - 添加左右滚动条

docker-compose.yml

@@ -175,7 +175,7 @@ services:
   
   okr:
     container_name: "dootask-okr-${APP_ID}"
-    image: "kuaifan/doookr:0.0.4"
+    image: "kuaifan/doookr:0.0.5"
     environment:
       TZ: "${TIMEZONE:-PRC}"
       DOO_TASK_URL: "http://${APP_IPPR}.3"

resources/assets/js/pages/manage/components/ChatInput/emoji.vue

@@ -23,7 +23,8 @@
                 </ul>
             </Scrollbar>
         </div>
-        <ul v-if="!onlyEmoji" class="chat-emoji-menu">
+        <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>
@@ -33,6 +34,7 @@
             <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
                 <img :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>
 </template>
@@ -77,10 +79,13 @@ export default {
 
             emojiData: [],
             emoticonData: [],
+
+            emojiMenuScrollLeft: 0,
         };
     },
     mounted() {
         this.initData()
+        this.onMonitorWheel()
     },
     watch: {
         type() {
@@ -109,6 +114,20 @@ 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 - 34
         }
     },
     methods: {
@@ -201,7 +220,27 @@ export default {
             } else {
                 this.$emit('on-select', item)
             }
+        },
+
+        onMonitorWheel() {
+            const container = this.$refs['chatEmojiMenuRef'];
+            container?.addEventListener("wheel", (event) =>{
+                event.preventDefault();
+                container.scrollLeft += event.deltaY;
+            });
+        },
+
+        onEmojiMenuScroll(type) {
+            const container = this.$refs['chatEmojiMenuRef'];
+            const containerWidth = container.offsetWidth - 68
+            const scrollLeft = type == 'right' ? container.scrollLeft + containerWidth : container.scrollLeft - containerWidth
+            container.scrollTo({ left: scrollLeft, behavior: "smooth" })
+        },
+
+        onHandleScroll(event) {
+            this.emojiMenuScrollLeft = event.target.scrollLeft;
         }
+        
     }
 }
 </script>

resources/assets/sass/pages/components/chat-input.scss

@@ -339,7 +339,7 @@
             width: 100%;
             padding: 3px 0;
             border-radius: 8px;
-            box-sizing: content-box;
+            // box-sizing: content-box;
             > li {
                 position: relative;
                 &:before {
@@ -375,6 +375,7 @@
 .chat-emoji-wrapper {
     display: flex;
     flex-direction: column;
+    position: relative;
 
     .chat-emoji-emosearch {
         flex-shrink: 0;
@@ -523,6 +524,24 @@
                 box-sizing: content-box;
             }
         }
+
+        .left-btn,.right-btn{
+            position: absolute !important;
+            height: 40px;
+            background: #f2f4f7 !important;
+            width: 34px;
+            z-index: 3;
+        }
+
+        .left-btn{
+            left: 0;
+            box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5);
+        }
+
+        .right-btn{
+            right: 0;
+            box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5);
+        }
     }
 }
 
@@ -891,7 +910,8 @@ body.window-portrait {
                 border-radius: 0;
                 background-color: #f8f8f8;
                 padding: 4px;
-                width: calc(100% - 8px);
+                width: 100%;
+                height: 48px;
                 > li {
                     &.active {
                         &:before {
@@ -899,6 +919,9 @@ body.window-portrait {
                         }
                     }
                 }
+                .left-btn,.right-btn{
+                    background: #f8f8f8 !important;
+                }
             }
         }
     }