yijianbao_user_uniapp/pages_im/pages/moments/index/components/ComentItem.vue

<template>
  <view
    class="coment_item"
    @longpress.stop="longpressHandler"
    @click.stop="$emit('startComent')"
  >
    <text @click.stop="toUser">{{ comment.nickname }}</text>
    <text v-if="comment.replyUserID">回复</text>
    <text v-if="comment.replyUserID">{{ comment.replyNickname }}</text>
    <text style="word-break: break-all;">{{ `：${comment.content}` }}</text>
    <u-overlay
      :show="moreMenuVisible"
      @click="moreMenuVisible = false"
      opacity="0"
    >
      <view
        :style="{ top: popMenuTop }"
        class="more_menu"
        @click="$emit('deleteComent', comment.commentID)"
      >
        <text>删除</text>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import MyAvatar from "../../../../components/MyAvatar/index.vue";
import MediaItem from "./MediaItem.vue";
export default {
  components: {
    MyAvatar,
    MediaItem,
  },
  props: {
    comment: Object,
    momentsUserID: String,
  },
  data() {
    return {
      moreMenuVisible: false,
      popMenuTop: "",
    };
  },
  mounted() {
    // console.log(this.comment);
  },
  methods: {
    async longpressHandler() {
      if (
        this.comment.userID === this.$store.getters.storeCurrentUserID ||
        this.momentsUserID === this.$store.getters.storeCurrentUserID
      ) {
        const { top } = await this.getEl(".coment_item");
        this.popMenuTop = `${top - 12}px`;
        this.moreMenuVisible = true;
      }
    },
    getEl(el) {
      return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select(el)
          .boundingClientRect((data) => {
            resolve(data);
          })
          .exec();
      });
    },
    toUser() {
      console.log("sssss");
    },
  },
};
</script>

<style lang="scss" scoped>
.coment_item {
  padding: 10rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f6f6f6;

  text:nth-child(odd) {
    color: #6085b1;
  }

  text:nth-child(2) {
    padding: 0 8rpx;
  }

  .more_menu {
    position: absolute;
    z-index: 999;
    width: max-content;
    border-radius: 6rpx;
    background-color: #5d5e61;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    padding: 8rpx 32rpx;
    right: 50%;
    transform: translate(50%, -100%);

    text {
      color: #fff;
    }
  }

  &:active {
    background-color: #ededed;
  }
}
</style>