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">{{$t('chat.hava')}}{{atNum}}{{$t('chat.atYouWithPeople')}}</div>
         <i class="icon-close" :title="$t('public.close')" @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}}{{$t('chat.atYou')}}</div>
        <i class="icon-close" :title="$t('public.close')" @click.stop="closeAtme"></i>
      </div>

  </div>
</template>

<script>
import _ from 'lodash'
import { mapMutations } from 'vuex'

export default {
  name: 'atMe',
  props: {
    atList: [Array]
  },
  computed: {
    atNum () {
      return _.unionBy(this.atList, 'userId').length
    }
  },
  data () {
    return {
      totalVisible: true,
      itemVisible: true
    }
  },
  methods: {
    ...mapMutations([
      'clearAtList'
    ]),
    scrollToMsg () {
      this.$emit('scrollToMsg', this.atList.length - 1)
    },
    closeAtme () {
      this.itemVisible = false
      this.clearAtList()
    }
  }
}
</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>