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

实现的效果
在这里插入图片描述

目录

$ 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

<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>

App.vue

<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

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

已标记关键词 清除标记
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、类、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据类型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、类等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含类的高级技术、类的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含类型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页