read-more's Introduction

Vue.js Read-More

Read-More is a simple plugin that has been created with ❤️ 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

<template>
  <div class="hello">
    <div v-readMore:25="msg"></div>
    <div v-readMore:100="msg2"></div>
    <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>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
      msg2: 'Lorem ipsum dolor sit amet'
    }
  }
}
</script>

Using Options

All read more options were converted to props to be able use them in the vue-read-more component.

Usage

<read-more more-str="read more" :text="msg" link="#" less-str="read less" :max-chars="50"></read-more>

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`.