atme.vue 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div class="at-me" v-if="atList">
  3. <div class="at-me-item" v-if="atList.length >= 2 && totalVisible" @click="scrollToMsg">
  4. <div class="at-content">有{{atList.length}}个人提到了你</div>
  5. <i class="icon-close" title="关闭" @click.stop="totalVisible = false"></i>
  6. </div>
  7. <div class="at-me-item" v-if="atList.length && itemVisible" @click="scrollToMsg">
  8. <div class="at-content">{{atList[0].name}}提到了你</div>
  9. <i class="icon-close" title="关闭" @click.stop="itemVisible = false"></i>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'atMe',
  16. props: {
  17. atList: [Array]
  18. },
  19. data () {
  20. return {
  21. totalVisible: true,
  22. itemVisible: true
  23. }
  24. },
  25. methods: {
  26. scrollToMsg () {
  27. this.$emit('scrollToMsg', 0)
  28. }
  29. }
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. .at-me{
  34. position:absolute;
  35. left: 0;
  36. bottom: 3px;
  37. right: 22px;
  38. height: 32px;
  39. display: flex;
  40. justify-content: flex-end;
  41. pointer-events: none;
  42. .mini{
  43. right: 8px;
  44. }
  45. .at-me-item{
  46. box-sizing: border-box;
  47. height: 100%;
  48. padding: 10px;
  49. padding-right: 0;
  50. margin-left: 5px;
  51. border: 1px solid rgba($color: #000000, $alpha: 0.1);
  52. background: #fff;
  53. display: flex;
  54. align-items: center;
  55. cursor: pointer;
  56. }
  57. .at-content{
  58. font-size: 14px;
  59. color: #259af2;
  60. margin-right: 5px;
  61. }
  62. .icon-close{
  63. display: block;
  64. width: 7px;
  65. height: 7px;
  66. padding:3px 12px;
  67. border-left: 1px solid rgba($color: #000000, $alpha: 0.1);
  68. background: url(./assets/icon-close.png) center no-repeat;
  69. cursor: pointer;
  70. }
  71. }
  72. </style>