vue-view-more

view more UI component based on vue2.

Installation

npm i vue-view-more

demo

check the example folder

npm run start

Basic Use

• slot content is the content you want to display
• slot trigger is the view more button

<template>
  <div id="app">
      <ViewMore :height="100">
      <template v-slot:content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </template>
      <template v-slot:trigger>
        <div class="btn-vm">view more</div>
      </template>
    </ViewMore>
    </div>
</template>

<script>
import ViewMore from 'vue-view-more'

export default {
  // ...
}

</script>

Sometimes the content may not ready when ViewMore's mounted event emited. Call update method to update ViewMore when the content is ready

<template>
  <div id="app">
    <ViewMore :height="100" ref="more">
      <template v-slot:content>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </template>
      <template v-slot:trigger>
        <div class="btn-vm">view more</div>
      </template>
    </ViewMore>
    </div>
</template>

<script>
import ViewMore from 'vue-view-more'

export default {
  // ...
  mounted() {
    this.$nextTick(() => {
      this.$refs.more.update()
    })
  }
}

</script>

props

| Property | Type | Required? | Description | |:---|:---|:---:|:---| | height | Number | yes | the init height of content |