vue-read-more2

1.0.4 • Public • Published

Vue.js ReadMore

npm version

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

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

MIT

Use at your own risk! with ❤️ by Wimil

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i vue-read-more2

      Weekly Downloads

      2

      Version

      1.0.4

      License

      MIT

      Unpacked Size

      7.16 kB

      Total Files

      6

      Last publish

      Collaborators

      • wimil