teachcloud-print-web/src/components/MoreText.vue

<template>
  <span class="more-text">
    <el-popover
      v-if="moreContent"
      placement="top"
      width="300"
      trigger="hover"
      :content="moreContent"
    >
      <span slot="reference">{{ showContent }}...</span>
    </el-popover>
    <span v-else>{{ showContent }}</span>
  </span>
</template>

<script>
import { objTypeOf } from "@/plugins/utils";
export default {
  name: "more-text",
  props: {
    data: {
      type: [Array, String],
      default: null,
    },
    showCount: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      showContent: "",
      moreContent: "",
    };
  },
  watch: {
    data(val) {
      this.initData();
    },
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (!this.data) return;

      const type = objTypeOf(this.data);

      if (type === "array") {
        this.showContent = this.data.slice(0, this.showCount).join("，");
        this.moreContent = "";
        if (this.data.length > this.showCount) {
          this.moreContent = this.data.join("，");
        }
      } else if (type === "string") {
        this.showContent = this.data.substring(0, this.showCount);
        this.moreContent = "";
        if (this.data.length > this.showCount) {
          this.moreContent = this.data;
        }
      }
    },
  },
};
</script>