chat/_src/components/chatAt/index.vue

<template>
  <div class="chat-at">
    <div class="bar-wrap">
      <div ref="container">
        <div class="item"
          v-for="(item, key) in filterList"
          :key="key"
          @click="atPerson(key)"
          :class="{'active': key === curInd}"
        >
          <div class="avatar" :class="`avatar_bg${item.user_id % 9}`">
            {{item.nick_name.slice(0,2).toUpperCase()}}
          </div>
          <span class="name">{{item.nick_name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'chatAt',
  props: {
    curInd: {
      type: Number
    },
    filterList: {
      type: Array
    }
  },
  computed: {
    ...mapState([
      'userId'
    ])
  },
  watch: {
    curInd (val) {
      this.scrollIntoView()
    }
  },
  methods: {
    atPerson (key) {
      let item = this.filterList[key]
      this.$emit('atperson', item.user_name)
    },
    scrollIntoView () {
      let dom = this.$refs.container.children[this.curInd]
      if (dom && dom.scrollIntoView) {
        dom.scrollIntoView({
          behavior: 'smooth',
          block: 'center',
          inline: 'nearest'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-at {
  position: absolute;
  top: -100px;
  left: 2px;
  right: 2px;
  height: 100px;
  background-color: #ffffff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 0 2px rgba($color: #3a3a3a, $alpha: .3);
}
.bar-wrap{
  height: 100%;
  overflow-y: scroll;

  &::-webkit-scrollbar {
      width: 8px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      background-color: transparent;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
    &:hover{
      &::-webkit-scrollbar-thumb {
        background-color: rgba($color: #c3c3c3, $alpha: 0.3);
      }
    }
}
.item{
  padding: 6px 8px;
  line-height: 20px;
  cursor: pointer;
  &.active{
    background-color: #eeeeee;
  }
  &:hover{
    background-color: #eeeeee;
  }
}
.avatar{
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
  font-size: 12px;
}
.name{
  font-size: 12px;
  color: #333333;
  display: inline-block;
}
</style>