vue-truncate-collapsed

A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
75,853 104
vue vue.js vue-component vue2 truncate collapsed
Install
npm install vue-truncate-collapsed
Latest Version:3.0.1
Older releases:2
License:MIT
Last Updated:Dec 9, 2022
Links: GitHub  ·  npm
Maintainer: kavalcante

vue-truncate-collapsed

A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable.

Getting Started

NPM
$ npm install vue-truncate-collapsed --save
Clone this repo

Clone or download the component and save in your own project.

Installing

ES6
import truncate from 'vue-truncate-collapsed';

new Vue({
  components: {
    truncate
  }
})
CommonJS
var truncate = require('vue-truncate-collapsed');

new Vue({
  components: {
    'truncate': truncate
  }
})
CDN
<!-- import JavaScript -->
<script src="https://unpkg.com/vue-truncate-collapsed"></script>

USAGE

Text
<truncate clamp="..." :length="90" less="Show Less" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et."></truncate>
Raw HTML
<truncate clamp="..." :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>
Add class to Show More/ Show Less link
<truncate action-class="customClass" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>
Add class to collapsed text
<truncate collapsed-text-class="collapsed" clamp="Show more" :length="90" less="Show Less" type="html" text="<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p> Quam modi consequuntur quis porro explicabo iusto repudiandae odio nobis, assumenda iure totam, eum expedita quae at nostrum excepturi corrupti unde et.</p>"></truncate>

Attributes

Option Default Type Description
truncated false boolean The initial state of the truncation. true is collapsed, false is expanded.
text no default value string The text that will be truncated.
length 100 number Length of text after truncate.
clamp Read More string Link that will be after the text with a link to expand.
less Show Less string Link that will be after the text when it's expand, when click text collapses.
type text string Either text or html. To change whether to treat the input from text attribute as text or raw HTML.
class empty string string To add a class name to the link that will be after the text is expanded or collapsed.
collapsedTextClass '' string Allows you to add a class to the text when it is collapsed.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Related Packages

@xunlei/vue-lazy-component

Vue.js 2.0 组件级懒加载方案 Vue.js 2.x component level lazy loading solution

14,137 1,003
vue-component vue.js vue-plugin
@xunlei/vue-context-menu

Vue 2.0 右键菜单组件，菜单内容可以随意自定义

7,700 335
vue-component vue.js vue-plugin
vuejs-countdown-timer

Vue 2 countdown and timer component

53,691 48
vue-component vue2 countdown-timer vuejs2
vue2-bootstrap-modal

Vue 2 Bootstrap Component

14,593 29
vue-component vue2 bootstrap vue2-bootstrap-modal
ner-text-annotation

A vue2component for NER text annotation

458
vue-component vue2 data-masking text-annotation

Version History

Version Released License
3.0.1 MIT
3.0.0 MIT
2.1.0 MIT
2.0.1 MIT
2.0.0 MIT