Nanobots Producing Megastructures

    vue-line-clamp-extended
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Vue line-clamp directive

    This is a basic line-clamp directive for Vue, extended with some extra features. In addition to restricting the text in question to configured amount of lines, it will also an event that indicates if the original text overflows specified amount of lines or not. It also allows for the overflow to be controlled from outside, i.e. toggle the line-clamp on-and-off.

    Install

    npm install vue-line-clamp-extended --save
    

    Usage

    Import the directive

    import { lineClamp } from 'vue-line-clamp-extended'

    or

    var lineClamp = require('vue-line-clamp-extended').lineClamp

    and then configure it to your Vue (must be done before instantiating your application)

    Vue.directive('line-clamp', lineClamp)

    after this, you can use the directive on elements as follows:

    const longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis mauris fermentum, lacinia odio in, varius magna. Cras lobortis tortor sed eros pellentesque tempor."
    <p v-line-clamp="
      lines: 5,
      text: longText
    }"></p>

    Options

    The directive is configured by passing a configuration object as the attribute value.

    Following options are supported:

    • opts.text - (mandatory) text to be shortened
    • opts.lines - (optional, defaults to 3) number of lines that are to be shown
    • opts.expanded - (optional, defaults to false) boolean or a function that returns a boolean. This allows you to arbitrarily control whether you want to show the whole text or not.

    The directive will additionally emit an is-expandable event in the context of it's parent that tells you if the text would overflow it's container or not.

    Advanced use-cases

    Toggle line-clamping

    <template>
      <p @click="toggle()" v-line-clamp="{ text: someText, expanded: showMore }">
    </template>
     
    <script>
    module.exports = {
      data: function() {
        return {
          showMore: false, // This can also be a function that returns a boolean
          someText: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis mauris fermentum, lacinia odio in, varius magna. Cras lobortis tortor sed eros pellentesque tempor."
        }
      },
      methods: {
        toggle() {
          this.showMore = !this.showMore
        }
      }
    }
    </script>

    Listen to is-expandable event

    <template>
      <p v-line-clamp="{ text: someText }">
    </template>
     
    <script>
    module.exports = {
      data: function() {
        return {
          someText: "text text"
        }
      },
      created() {
        this.$on('is-expandable', bool => console.log(bool ? 'text overflows' : 'text does not overflow'))
      }
    }
    </script>

    Install

    npm i vue-line-clamp-extended

    DownloadsWeekly Downloads

    65

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    8.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • mlison