Vue.js Read-More
Read-More is a simple plugin fo vue.js that has been created with :heart: by a bored developer.
Examples
For examples, refer to the demo page.
NPM
```
npm install vue-read-more --save
```
Features!
- Add read more length
- Add read more link
- Custom read more string
- Custom read less string
Usage
```
import ReadMore from 'vue-read-more';
Vue.use(ReadMore);
```
Sample
You can use either the Component approach or the Directive approach.
Component
```<read-more more-str="read more" :text="msg" link="#" less-str="read less" :max-chars="50"></read-more><read-more more-str="read more" less-str="read less" :text="msg2" link="#"></read-more>Directive
Note: When using the directive approach, you will always havelessStr after clicking the read more and you can't modify the moreStr and the lessStr unless you will use the Component approach.
```
<div v-readMore:25="msg"></div><div v-readMore:100="msg2"></div>Using Options
All read more options were converted to props to be able use them in thevue-read-more component.
Usage
```html
```
API
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| text (required) | String | none | text is used to limit the submitted string based on the maxChars.|
| maxChars | Number | 100 | It is used to limit the text value to generate a read more text. |
| link | String | # | You can pass a link incase you want to redirect the user when the moreStr has been triggerd.
| moreStr | String | read more | You can customize your read more string by passing a value to moreStr.
| lessStr | String | none | You can customize your read less string by passing a value to lessStr.
Note:
When you didn't pass something in the lessStr, after clicking the read more you wouldn't have a read less link.
License
