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 --saveClone 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 |
|---|---|---|---|
| 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
