chat/_src/components/chatAt/atme.vue

<template>
  <div class="at-me" v-if="atList && atList.length">
      <div class="at-me-item" v-if="atNum >= 2 && totalVisible" @click="scrollToMsg">
         <div class="at-content">有{{atNum}}个人提到了你</div>
         <i class="icon-close" title="关闭" @click.stop="totalVisible = false"></i>
      </div>
      <div class="at-me-item" v-else-if="atNum && itemVisible" @click="scrollToMsg">
          <div class="at-content">{{atList[0].name}}提到了你</div>
        <i class="icon-close" title="关闭" @click.stop="itemVisible = false"></i>
      </div>

  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'atMe',
  props: {
    atList: [Array]
  },
  computed: {
    atNum () {
      return _.unionBy(this.atList, 'userId').length
    }
  },
  data () {
    return {
      totalVisible: true,
      itemVisible: true
    }
  },
  methods: {
    scrollToMsg () {
      this.$emit('scrollToMsg', this.atList.length - 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.at-me{
    position:absolute;
    left: 0;
    bottom: 3px;
    right: 22px;
    height: 32px;
    display: flex;
    justify-content: flex-end;
    // pointer-events: none;
    .mini{
      right: 8px;
    }
    .at-me-item{
        box-sizing: border-box;
        height: 100%;
        padding: 10px;
        padding-right: 0;
        margin-left: 5px;
        border: 1px solid rgba($color: #000000, $alpha: 0.1);
        background: #fff;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .at-content{
      font-size: 14px;
        color: #259af2;
        margin-right: 5px;
    }

    .icon-close{
      display: block;
      width: 7px;
      height: 7px;
      padding:3px 12px;
      border-left: 1px solid rgba($color: #000000, $alpha: 0.1);
      background: url(./assets/icon-close.png) center no-repeat;
      cursor: pointer;
    }
}
</style>