@findsoft/ellipsis v1.1.0

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