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.stop="atPerson(key)"
            :class="{'active': key == curInd}"
          >
            <div class="avatar" :class="`avatar_bg${item.user_id % 9}`">
              <img :src="item.cover_photo" v-if="item.cover_photo">
              <template v-else>
                  {{item.nick_name.slice(0,2).toUpperCase()}}
              </template>
            </div>
            <div class="name">
              <p class="nick-name">
                  {{item.nick_name}}
                  <span :class="['status-identity','identity'+item.is_admin]" v-if="item.is_admin>0">{{item.is_admin==1?$t('public.admin'):$t('public.owner')}}</span>
                  <span class="status-forbidden" v-if="item.is_block==1"> {{$t('public.ban')}}</span>
              </p>
              <p class="user-name">@{{item.user_name}}</p>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'chatAt',
  props: {
    curInd: {
      type: Number
    },
    filterList: {
      type: Array
    }
  },
  computed: {
    ...mapState([
      'userId'
    ])
  },
  data () {
    return {
      showFilterList: []
    }
  },
  watch: {
    curInd (val) {
      this.scrollIntoView()
    }
  },
  methods: {
    atPerson (key) {
      let item = this.filterList[key]
      this.$emit('atperson', item.user_name, item.nick_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: rgba($color: #8d8a8a, $alpha: 0.2);
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
}
.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;
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
    vertical-align: top;
  }
}
.name{
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
}
.nick-name{
  line-height: 1;
  color: #333333;
}
.user-name{
  line-height: 1;
  color: #a8a8a8;
}
.status-identity{
    padding-right: 14px;
    &.identity1{
      background: url('../../assets/icon-admin.png') right / 12px 11px no-repeat;
    }
    &.identity2{
      background: url('../../assets/icon-creater.png') right / 12px 11px no-repeat;
    }
}
.status-forbidden{
  color: #a8a8a8;
}
</style>