a substr component of vue2.js
npm install vue-ellipsis  
a multiline sentence ellipsis component of vue2.js
$ npm install vue-ellipsis --save
$3
$ yarn add vue-ellipsis
$3
$ bower install vue-ellipsis
Ellipsis Component Attributes
| Parameter | Description | Type | Default | Required |
|------------|----------------|--------------------|--------------|----------------|
| data | The string data that need to add ellipsis | String | - | true |
| line-clamp | Number of lines to display | Number | 1 | true |
| line-height | Single line height (please calculate the corresponding px value) | String | '22px' | true |
| end-char | String at the end of the sentence | String |'...'| false |
| end-html | HTML element at the end of the sentence | String| - | false |
| delayTime | respond to window onresize event delay time | Number | 20 | false |
| click | Click callback function | Function | - | false |
How To Use
Import:
import Vue from 'vue'
import VueEllipsis from 'vue-ellipsis'
Vue.use(VueEllipsis)Component Use:
html: HTML String. just like 'read more'
handleClick: click callback function
:line-clamp="2"
:line-height="'24px'"
:end-char="'###'"
:end-html="html"
@click="handleClick"
>
- version 1.1.6 => change console.log tips.
- version 1.1.5 => fix a bug about data change error show.
- version 1.1.3 => change build config to fix a bug about vue runtime-only build.
- version 1.1.2 => fix a bug about str length can't get.
- version 1.1.x => add user-defined ending string; add user-defined ending html; add click callback function.
- version 1.0.x => add basic functions: substring multiline sentence and add '...'.