vue-read-more2 v1.0.4

Vue.js ReadMore

Bifurcated project of https://github.com/orlyyani/read-more, I have added some improvements to the directive

NPM

 npm install vue-read-more2 --save

Features!

• Add read more length
• Add read more link
• Custom read more string
• Custom read less string

Usage

 import ReadMore from 'vue-read-more2';
 
 Vue.use(ReadMore);

Sample

You can use either the Component approach or the Directive approach.

Component

<template>
  <div class="hello">
    <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>

Directive

<template>
  <div class="hello">
    <div v-readMore="{ moreStr: 'Read More', lessStr: 'Read Less', limit: 100 }">{{msg}}</div>
    <div v-readMore="{ limit: 100, text: msg2 }"></div>
  </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

Note: When you didn't pass something in the lessStr, after clicking the read more you wouldn't have a read less link.

License

MIT

Use at your own risk! with :heart: by Wimil