|
@@ -34,11 +34,12 @@ export const chatAtMixin = {
|
|
|
atPerson (name) {
|
|
|
let el = this.$refs.chatInput
|
|
|
let selectionStart = el.selectionStart
|
|
|
- this.inputMsg = this.inputMsg.slice(0, selectionStart) + `${name} ` + this.inputMsg.slice(selectionStart)
|
|
|
+ let realStart = selectionStart - this.keyAfterAt.length
|
|
|
+ this.inputMsg = this.inputMsg.slice(0, realStart) + `${name} ` + this.inputMsg.slice(selectionStart)
|
|
|
this.atInd = 0
|
|
|
el.focus()
|
|
|
this.$nextTick(() => {
|
|
|
- el.setSelectionRange(selectionStart + name.length + 1, selectionStart + name.length + 1)
|
|
|
+ el.setSelectionRange(realStart + name.length + 1, realStart + name.length + 1)
|
|
|
})
|
|
|
},
|
|
|
handleUp () {
|
|
@@ -57,23 +58,35 @@ export const chatAtMixin = {
|
|
|
export const chatInputMixin = {
|
|
|
data () {
|
|
|
return {
|
|
|
- selectionAfterAt: false// 光标在@后面
|
|
|
+ selectionAfterAt: false, // 光标在@后面
|
|
|
+ keyAfterAt: '' // 光标后的搜索关键字
|
|
|
}
|
|
|
},
|
|
|
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])
|
|
|
+ if (this.keyAfterAt !== '') {
|
|
|
+ for (let k in members) {
|
|
|
+ let userName = members[k].user_name
|
|
|
+ let nickName = members[k].nick_name
|
|
|
+ if (k == this.userId) continue
|
|
|
+ if ((nickName.indexOf(this.keyAfterAt) !== -1 || userName.indexOf(this.keyAfterAt) !== -1) && this.inputMsg.indexOf('@' + userName) === -1) {
|
|
|
+ resArr.push(members[k])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let k in members) {
|
|
|
+ if (k == this.userId) continue
|
|
|
+ if (this.inputMsg.indexOf('@' + members[k].user_name) === -1) {
|
|
|
+ resArr.push(members[k])
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
return resArr
|
|
|
},
|
|
|
atShow () {
|
|
|
+ this.atInd = 0
|
|
|
return this.selectionAfterAt && this.filterMembers.length
|
|
|
}
|
|
|
},
|
|
@@ -85,6 +98,73 @@ export const chatInputMixin = {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ getStrBeforeSelection () {
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ if (!el) return ''
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ let prevStr = this.inputMsg.slice(0, selectionStart)
|
|
|
+ return prevStr
|
|
|
+ },
|
|
|
+ getStrAfterSelection () {
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ if (!el) return ''
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ let prevStr = this.inputMsg.slice(selectionStart)
|
|
|
+ return prevStr
|
|
|
+ },
|
|
|
+ handleLeft (event) {
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ if (selectionStart === 0) return
|
|
|
+ let prevStr = this.getStrBeforeSelection()
|
|
|
+ let members = this.group.members
|
|
|
+
|
|
|
+ for (let k in members) {
|
|
|
+ let name = members[k].user_name
|
|
|
+ let reg = new RegExp(`@${name} $`)
|
|
|
+ if (reg.test(prevStr)) {
|
|
|
+ event.preventDefault()
|
|
|
+ el.setSelectionRange(selectionStart - name.length - 2, selectionStart - name.length - 2)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleRight (event) {
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ let afterStr = this.getStrAfterSelection()
|
|
|
+ let members = this.group.members
|
|
|
+
|
|
|
+ for (let k in members) {
|
|
|
+ let name = members[k].user_name
|
|
|
+ let reg = new RegExp(`^@${name} `)
|
|
|
+ if (reg.test(afterStr)) {
|
|
|
+ event.preventDefault()
|
|
|
+ el.setSelectionRange(selectionStart + name.length + 2, selectionStart + name.length + 2)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleDel (event) {
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ if (selectionStart === 0) return
|
|
|
+ let prevStr = this.getStrBeforeSelection()
|
|
|
+ let members = this.group.members
|
|
|
+
|
|
|
+ for (let k in members) {
|
|
|
+ let name = members[k].user_name
|
|
|
+ let reg = new RegExp(`@${name} $`)
|
|
|
+ if (reg.test(prevStr)) {
|
|
|
+ event.preventDefault()
|
|
|
+ this.inputMsg = this.inputMsg.slice(0, selectionStart - name.length - 2) + this.inputMsg.slice(selectionStart)
|
|
|
+ this.$nextTick(() => {
|
|
|
+ el.setSelectionRange(selectionStart - name.length - 2, selectionStart - name.length - 2)
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
handleKeyDown (event) {
|
|
|
if (this.atShow) {
|
|
|
event.preventDefault()
|
|
@@ -118,19 +198,29 @@ export const chatInputMixin = {
|
|
|
* 监听光标位置
|
|
|
*/
|
|
|
handleSelectionChange () {
|
|
|
- let selectionStart = this.$refs.chatInput.selectionStart
|
|
|
- let prevStr = this.inputMsg.slice(0, selectionStart)
|
|
|
- this.selectionAfterAt = /@$/.test(prevStr)
|
|
|
+ let el = this.$refs.chatInput
|
|
|
+ if (!el) return
|
|
|
+ let selectionStart = el.selectionStart
|
|
|
+ let selectionEnd = this.$refs.chatInput.selectionEnd
|
|
|
+ if (selectionStart !== selectionEnd) return
|
|
|
+
|
|
|
+ let prevStr = this.getStrBeforeSelection()
|
|
|
+ this.selectionAfterAt = /@/.test(prevStr)
|
|
|
+ if (this.selectionAfterAt) {
|
|
|
+ this.keyAfterAt = prevStr.slice(prevStr.lastIndexOf('@') + 1)
|
|
|
+ }
|
|
|
},
|
|
|
/**
|
|
|
* @des 处理ios系统下窗体闪烁的bug
|
|
|
* @param {boolean} flag {true: 激活修复状态, false: 恢复原始状态}
|
|
|
*/
|
|
|
fixIOS (flag = true) {
|
|
|
+ let el = this.$refs.scrollWrap
|
|
|
+ if (!el) return
|
|
|
if (flag) {
|
|
|
- this.$refs.scrollWrap.style.overflowY = 'hidden'
|
|
|
+ el.style.overflowY = 'hidden'
|
|
|
} else {
|
|
|
- this.$refs.scrollWrap.style.overflowY = 'scroll'
|
|
|
+ el.overflowY = 'scroll'
|
|
|
}
|
|
|
}
|
|
|
}
|