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

文档：

• https://www.heyui.top/component/other/textellipsis

安装

npm install heyui

实现的效果

目录

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

package.json

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

main.js

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;

Text.vue

  
    
      
        ...
        查看更多
      

      收起
    
  




export default {
  name: '',

  props: [],

  data() {
    return {
      text:
        '《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。',
      isLimitHeight: true,
    };
  },

  computed: {},

  methods: {},

  created() {},
};



.box {
  width: 500px;
  border: 1px solid #0084ff;
}

.link {
  cursor: pointer;
  color: #0084ff;
}

App.vue

  
    

    
  



import TextBox from './Text.vue';

export default {
  name: '',

  props: [],

  components: {
    TextBox,
  },
};

启动测试服务

$ vue serve

源码参考 https://github.com/heyui/heyui/blob/master/src/components/text-ellipsis/textellipsis.vue

参考文档: TextEllipsis 超出文本省略 深入扩展文本溢出解决方案