Vue.js Read-MoreRead-More is a simple plugin fo vue.js that has been created with :heart: by a bored developer.
ExamplesFor 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); ```
SampleYou can use either the Component approach or the Directive approach.
<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>
DirectiveNote: When using the directive approach, you will always have
lessStrafter clicking the read more and you can't modify the
lessStrunless you will use the Component approach. ```
Using OptionsAll read more options were converted to props to be able use them in the
vue-read-morecomponent. Usage ```html ```
API| Option | Type | Default | Description | |--------|------|---------|-------------| |
textis used to limit the submitted string based on the
100| It is used to limit the
textvalue to generate a read more text. | |
#| You can pass a link incase you want to redirect the user when the
moreStrhas been triggerd. |
read more| You can customize your read more string by passing a value to
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.