@findsoft/ellipsis

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