Vue：HeyUI组件TextEllipsis超出文本省略

npm install heyui

$ tree
.
├── App.vue
├── Text.vue
├── main.js
└── package.json

{
  "dependencies": {
    "eslint-plugin-vue": "^7.4.1",
    "heyui": "^1.28.0"
  }
}

import Vue from "vue";
import App from "./App.vue";
import { install, TextEllipsis } from "heyui";
// 按需加载
Vue.use(install, { components: { TextEllipsis } });
const app = new Vue({
  el: "#app",
  render: (h) => h(App),
});
export default app;

<template>
  <div class="box">
    <TextEllipsis
      :text="text"
      :height="30"
      :isLimitHeight="isLimitHeight"
    >
      <template slot="more">
        <span>...</span>
        <span
          @click="isLimitHeight=false"
          class="link"
        >查看更多</span>
      </template>
      <span
        slot="after"
        class="link"
        v-if="!isLimitHeight"
        @click="isLimitHeight=true"
      >收起</span>
    </TextEllipsis>
  </div>
</template>
<script>
export default {
  name: '',
  props: [],
  data() {
    return {
      text:
        '《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。',
      isLimitHeight: true,
    };
  },
  computed: {},
  methods: {},
  created() {},
};
</script>
<style scoped>
.box {
  width: 500px;
  border: 1px solid #0084ff;
}
.link {
  cursor: pointer;
  color: #0084ff;
}
</style>

<template>
  <div>
    <TextBox />
    <TextBox style="margin-top:20px;"/>
  </div>
</template>
<script>
import TextBox from './Text.vue';
export default {
  name: '',
  props: [],
  components: {
    TextBox,
  },
};
</script>
<style scoped>
</style>

$ vue serve