完善@功能

_src/components/chatAt/index.vue

@@ -83,16 +83,11 @@ export default {
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
-      background-color: transparent;
+      background-color: rgba($color: #8d8a8a, $alpha: 0.2);
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
-    &:hover{
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba($color: #c3c3c3, $alpha: 0.3);
-      }
-    }
 }
 .item{
   padding: 6px 8px;

_src/components/chatMini/chatMini.scss

@@ -185,16 +185,11 @@ $offsetRight: 5px;
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
-    background-color: transparent;
+    background-color: rgba($color: #8d8a8a, $alpha: 0.2);
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  &:hover{
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba($color: #8d8a8a, $alpha: 0.2);
-    }    
-  }
 }
 
 .box-ft{
@@ -298,7 +293,8 @@ $offsetRight: 5px;
     max-height: 175px;
     font-size: 14px;
     color: #000000;
-    line-height: 14px;
+    line-height: 16px;
+    padding: 1px;
     padding-left: 8px;
     margin: 0;
     border: none;

_src/components/chatMini/chatMini.vue

@@ -89,6 +89,7 @@
                 @keydown.enter="handleKeyDown"
                 placeholder="Write a message"
                 v-model="inputMsg"
+                @focus="handleFocus"
                 @blur="handleBlur"
                 :style="{height:inputHeight}"
               />
@@ -166,11 +167,11 @@ import PostMessager from '@/util/postMessager.js'
 import ScatterJS from 'scatter-js/dist/scatter.esm'
 import { Message } from 'element-ui'
 import ImageMin from '@/util/imageMin.js'
-import { chatAtMixin } from '@/mixins'
+import { chatAtMixin, chatInputMixin } from '@/mixins'
 
 export default {
   name: 'chatMini',
-  mixins: [chatAtMixin],
+  mixins: [chatAtMixin, chatInputMixin],
   components: {
     msgItem,
     emojiList,
@@ -207,22 +208,7 @@ export default {
       pinList: state => state.group.pinList,
       atList: state => state.group.atList,
       unreadNums: state => state.group.unreadNums
-    }),
-    filterMembers () {
-      let val = this.inputMsg.replace('@', '')
-      let members = this.group.members
-      let resArr = []
-      for (let k in members) {
-        if (k == this.userId) continue
-        if (val.indexOf(members[k].nick_name) === -1) {
-          resArr.push(members[k])
-        }
-      }
-      return resArr
-    },
-    atShow () {
-      return this.inputMsg.match(/@$/) && this.filterMembers.length
-    }
+    })
   },
   data () {
     return {
@@ -742,9 +728,6 @@ export default {
       e.preventDefault()
       return false
     },
-    handleBlur () {
-      this.updateChatInputFocus(false)
-    },
     placeEnd (el) {
       var range = document.createRange()
       range.selectNodeContents(el)
@@ -877,24 +860,6 @@ export default {
       }
       return window.parent.postMessage(request, '*')
     },
-    handleKeyDown (event) {
-      if (this.atShow) {
-        event.preventDefault()
-        let item = this.filterMembers[this.atInd]
-        this.atPerson(item.user_name)
-        return
-      }
-
-      if (event.altKey || event.ctrlKey) {
-        // 单纯换行
-        this.inputMsg = this.inputMsg + '\n'
-      } else {
-        event.returnValue = false
-        this.handleSend(event)
-      }
-
-      return false
-    },
     /**
      * @des 引用某条消息
      */

_src/components/chatRoom/chatRoom.scss

@@ -36,16 +36,11 @@
       border-radius: 3px;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
-      background-color: transparent;
+      background-color: rgba($color: #8d8a8a, $alpha: 0.2);
     }
     &::-webkit-scrollbar-track {
       background-color: transparent;
     }
-    &:hover{
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba($color: #c3c3c3, $alpha: 0.3);
-      }    
-    }
   }
   .msg-unread{
     border-radius: 20px;

_src/components/chatRoom/inputArea.vue

@@ -29,6 +29,7 @@
           placeholder
           v-focus
           v-model="inputMsg"
+          @focus="handleFocus"
           @blur="handleBlur"
         />
       </form>
@@ -43,13 +44,13 @@ import Emoji from '@/components/emoji'
 import chatAt from '@/components/chatAt'
 import { Message } from 'element-ui'
 import { mapState, mapMutations, mapActions } from 'vuex'
-import { chatAtMixin } from '@/mixins'
+import { chatAtMixin, chatInputMixin } from '@/mixins'
 import ImageMin from '@/util/imageMin.js'
 // import editArea from './editArea'
 
 export default {
   name: 'inputArea',
-  mixins: [chatAtMixin],
+  mixins: [chatAtMixin, chatInputMixin],
   components: {
     Emoji,
     chatAt
@@ -59,22 +60,7 @@ export default {
     ...mapState({
       chatInputFocus: state => state.group.chatInputFocus,
       blockList: state => state.group.blockList
-    }),
-    filterMembers () {
-      let val = this.inputMsg.replace('@', '')
-      let members = this.group.members
-      let resArr = []
-      for (let k in members) {
-        if (k == this.userId) continue
-        if (val.indexOf(members[k].user_name) === -1) {
-          resArr.push(members[k])
-        }
-      }
-      return resArr
-    },
-    atShow () {
-      return this.inputMsg.match(/@$/) && this.filterMembers.length
-    }
+    })
   },
   data () {
     return {
@@ -104,24 +90,6 @@ export default {
       this.emojiShow = false
       this.$refs.chatInput.focus()
     },
-    handleKeyDown (event) {
-      if (this.atShow) {
-        event.preventDefault()
-        let item = this.filterMembers[this.atInd]
-        this.atPerson(item.user_name)
-        return
-      }
-
-      if (event.altKey || event.ctrlKey || event.metaKey) {
-        // 单纯换行
-        this.inputMsg = this.inputMsg + '\n'
-      } else {
-        event.returnValue = false
-        this.handleSend(event)
-      }
-
-      return false
-    },
     /**
      * @des 处理消息发送
      */
@@ -251,9 +219,6 @@ export default {
         })
       }
     },
-    handleBlur () {
-      this.updateChatInputFocus(false)
-    },
     initDrop (e) {
       e.preventDefault()
       let files = Array.from(e.dataTransfer.files)

_src/mixins/index.js

@@ -33,10 +33,13 @@ export const chatAtMixin = {
   methods: {
     atPerson (name) {
       let el = this.$refs.chatInput
-      let lastIndex = this.inputMsg.lastIndexOf('@')
-      this.inputMsg = this.inputMsg.slice(0, lastIndex + 1) + `${name} `
+      let selectionStart = el.selectionStart
+      this.inputMsg = this.inputMsg.slice(0, selectionStart) + `${name} ` + this.inputMsg.slice(selectionStart)
       this.atInd = 0
       el.focus()
+      this.$nextTick(() => {
+        el.setSelectionRange(selectionStart + name.length + 1, selectionStart + name.length + 1)
+      })
     },
     handleUp () {
       if (this.atInd > 0) {
@@ -44,8 +47,74 @@ export const chatAtMixin = {
       }
     },
     handleDown () {
-      let membersLen = this.group.userCounts
+      let membersLen = this.filterMembers.length
       this.atInd < membersLen - 1 ? this.atInd++ : this.atInd = 0
     }
   }
 }
+
+// 聊天输入框
+export const chatInputMixin = {
+  data () {
+    return {
+      selectionAfterAt: false// 光标在@后面
+    }
+  },
+  computed: {
+    filterMembers () {
+      let val = this.inputMsg.replace('@', '')
+      let members = this.group.members
+      let resArr = []
+      for (let k in members) {
+        if (k == this.userId) continue
+        if (val.indexOf(members[k].user_name) === -1) {
+          resArr.push(members[k])
+        }
+      }
+      return resArr
+    },
+    atShow () {
+      return this.selectionAfterAt && this.filterMembers.length
+    }
+  },
+  watch: {
+    inputMsg (val, newval) {
+      this.handleSelectionChange()
+    }
+  },
+  methods: {
+    handleKeyDown (event) {
+      if (this.atShow) {
+        event.preventDefault()
+        let item = this.filterMembers[this.atInd]
+        this.atPerson(item.user_name)
+        return
+      }
+
+      if (event.altKey || event.ctrlKey) {
+        // 单纯换行
+        this.inputMsg = this.inputMsg + '\n'
+      } else {
+        event.returnValue = false
+        this.handleSend(event)
+      }
+
+      return false
+    },
+    handleFocus () {
+      document.addEventListener('selectionchange', this.handleSelectionChange)
+    },
+    handleBlur () {
+      document.removeEventListener('selectionchange', this.handleSelectionChange)
+      this.updateChatInputFocus(false)
+    },
+    /**
+     * 监听光标位置
+     */
+    handleSelectionChange () {
+      let selectionStart = this.$refs.chatInput.selectionStart
+      let prevStr = this.inputMsg.slice(0, selectionStart)
+      this.selectionAfterAt = /@$/.test(prevStr)
+    }
+  }
+}

_src/style/global.scss

@@ -22,16 +22,11 @@ body{
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
-    background-color: transparent;
+    background-color: rgba($color: #8d8a8a, $alpha: 0.2);
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  &:hover{
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba($color: #c3c3c3, $alpha: 0.3);
-    }    
-  }
 }
 
 .pub-modal-mask{

_src/style/mini.scss

@@ -84,16 +84,11 @@ body, html{
     border-radius: 3px;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
-    background-color: transparent;
+    background-color: rgba($color: #8d8a8a, $alpha: 0.2);
   }
   &::-webkit-scrollbar-track {
     background-color: transparent;
   }
-  &:hover{
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba($color: #c3c3c3, $alpha: 0.3);
-    }    
-  }
 }
 .pub-modal-mask{
   position: fixed;