<template>
  <div class="more-text">
    <div class="more-text-body" ref="textBody">
      <div class="more-text-content" ref="textContent">{{ content }}</div>
      <div v-if="hasMore" class="more-text-more" @click="showMore = !showMore">
        {{ showMore ? "收起" : "更多" }}
      </div>
      <el-popover
        v-model="showMore"
        popper-class="el-popper-dark"
        placement="bottom-start"
        width="400"
        trigger="manual"
      >
        <i class="more-text-icon" slot="reference"></i>
        <p>{{ content }}</p>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "more-text",
  props: {
    content: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      hasMore: false,
      showMore: false
    };
  },
  mounted() {
    this.hasMore =
      this.$refs.textBody.clientHeight <= this.$refs.textContent.clientHeight;
  },
  methods: {}
};
</script>
