Browse Source

修复@相关的部分bug

master
xsx 11 months ago
parent
commit
aa073611f2
  1. 4
      im-web/src/components/chat/ChatAtBox.vue
  2. 96
      im-web/src/components/chat/ChatGroupMember.vue
  3. 5
      im-web/src/components/chat/ChatInput.vue

4
im-web/src/components/chat/ChatAtBox.vue

@ -88,13 +88,13 @@ export default {
this.close();
},
scrollToActive() {
if (this.activeIdx * 35 - this.$refs.scrollBox.wrap.clientHeight > this.$refs.scrollBox.wrap.scrollTop) {
if (this.activeIdx * 40 - this.$refs.scrollBox.wrap.clientHeight > this.$refs.scrollBox.wrap.scrollTop) {
this.$refs.scrollBox.wrap.scrollTop += 140;
if (this.$refs.scrollBox.wrap.scrollTop > this.$refs.scrollBox.wrap.scrollHeight) {
this.$refs.scrollBox.wrap.scrollTop = this.$refs.scrollBox.wrap.scrollHeight
}
}
if (this.activeIdx * 35 < this.$refs.scrollBox.wrap.scrollTop) {
if (this.activeIdx * 40 < this.$refs.scrollBox.wrap.scrollTop) {
this.$refs.scrollBox.wrap.scrollTop -= 140;
if (this.$refs.scrollBox.wrap.scrollTop < 0) {
this.$refs.scrollBox.wrap.scrollTop = 0;

96
im-web/src/components/chat/ChatGroupMember.vue

@ -1,60 +1,64 @@
<template>
<div class="chat-group-member" :class="active ? 'active' : ''" :style="{ 'height': height + 'px' }">
<div class="member-avatar">
<head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"> </head-image>
</div>
<div class="member-name" :style="{ 'line-height': height + 'px' }">
<div>{{ member.showNickName }}</div>
</div>
</div>
<div class="chat-group-member" :class="active ? 'active' : ''" :style="{ 'height': height + 'px' }">
<div class="member-avatar">
<head-image :size="headImageSize" :name="member.showNickName" :url="member.headImage"> </head-image>
</div>
<div class="member-name" :style="{ 'line-height': height + 'px' }">
<div>{{ member.showNickName }}</div>
</div>
</div>
</template>
<script>
import HeadImage from "../common/HeadImage.vue";
export default {
name: "groupMember",
components: { HeadImage },
data() {
return {};
},
props: {
member: {
type: Object,
required: true
},
height: {
type: Number,
default: 50
},
active: {
type: Boolean,
default: false
}
},
computed: {
headImageSize() {
return Math.ceil(this.height * 0.75)
}
}
name: "groupMember",
components: { HeadImage },
data() {
return {};
},
props: {
member: {
type: Object,
required: true
},
height: {
type: Number,
default: 50
},
active: {
type: Boolean,
default: false
}
},
computed: {
headImageSize() {
return Math.ceil(this.height * 0.75)
}
}
}
</script>
<style lang="scss">
.chat-group-member {
display: flex;
position: relative;
padding: 0 5px;
align-items: center;
white-space: nowrap;
box-sizing: border-box;
display: flex;
position: relative;
padding: 0 5px;
align-items: center;
white-space: nowrap;
box-sizing: border-box;
.member-name {
padding-left: 10px;
height: 100%;
text-align: left;
white-space: nowrap;
overflow: hidden;
font-size: var(--im-font-size);
}
&.active {
background: #E1EAF7;
}
.member-name {
padding-left: 10px;
height: 100%;
text-align: left;
white-space: nowrap;
overflow: hidden;
font-size: var(--im-font-size);
}
}
</style>

5
im-web/src/components/chat/ChatInput.vue

@ -238,8 +238,9 @@ export default {
},
onBlur(e) {
this.updateRange();
if(!this.atIng){
this.updateRange();
}
},
onMousedown() {
if (this.atIng) {

Loading…
Cancel
Save