ellipsis

一个基于vue3&ant-design-vue2的文本省略组件

支持三种方式省略文本

1. 长度 isCharLimit
2. 行数 isLineLimit
3. 高度 isHeightLimit

Install

npm install @findsoft/ellipsis

Quick Start

<!-- vue -->
<template>
  <div class="about">
    <h1>This is a demo</h1>
    <a-ellipsis v-bind='ellipasisLists[0]'></a-ellipsis>
    <a-ellipsis v-bind='ellipasisLists[1]'></a-ellipsis>
    <a-ellipsis v-bind='ellipasisLists[2]'></a-ellipsis>
  </div>
</template>

import '@findsoft/ellipsis/dist/ellipsis.css';
import Ellipsis from '@findsoft/ellipsis';

export default {
  components: {
    aEllipsis: Ellipsis,
  },
  setup() {
    const text = '史蒂夫·乔布斯，是一名美国企业家、营销家和发明家，苹果公司的联合创始人之一，曾任董事长及首席执行官职位，NeXT创办人及首席执行官，也是皮克斯动画的创办人并曾任首席执行官，2006年为华特迪士尼公司的董事会成员。2017年9月苹果发布会举行的地方，以他命名为 Steve Jobs Theater 。';
    
    const ellipasisLists = [
      {
        type: 'length',
        text,
        isCharLimit: true,
        maxLength: 50,
      },
      {
        type: 'rows',
        text,
        isLineLimit: true,
        limitLineNumber: 3,
      },
      {
        type: 'height',
        text,
        isHeightLimit: true,
        limitHeightNumber: 60,
      },
    ];
    return {
      ellipasisLists
    }
  }
};

Props

| 参数 | 说明 | 类型 | 默认值 | | ---- | ---- | ---- | ---- | | text | 需要省略的字符 | String | '' | | ellipsisType | 超出时显示的内容 | String | ... | | fontSize | 字体大小 | Number | 14 | | showAll | 悬停是否显示全文内容 | Boolean | true | | 长度参数 | | | | | isCharLimit | 是否根据长度限制 | Boolean | false | | maxLength | 长度 | Number | 20 | | 行数参数 | | | | | isLineLimit | 是否根据行数限制 | Boolean | false | | limitLineNumber | 行数 | Number | 1 | | 高度参数 | | | | | isHeightLimit | 是否根据高度限制 | Boolean | false | | limitHeightNumber | 高度 | Number | 0 |