readmore

introduction

readmore，expand text，add expand / collapse text in the end of the text if the text is too long. tip, show the promot when hove over the content

How to use it

1. npm i @colinxu91/readmore

2. import module and install in Vue，reference to examples/main.js

import readmore from '../packages/index';
app.use(readmore);

3. properties

3.1 readmore

| property | coment | |-----------|--------------------------------------------------------------------------------------------------------| | text | whole text | | moreText | promot text for expand when whole text is too long | | lessText | promot text for collapse when whole text is too long | | hideType | collapse rule，according to character length - CHAR，according to words - WORD，according to lines - LINE | | maxLength | max length to display in collapse mode | | isImage | The less / more text is image path |

3.2 tip | property | coment | |-----------|--------------------------------------------------------------------------------------------------------| | content | whole text | | tip | the text when hove over contnent |

You can use slot to create your own content and tip template

4. example

4.1 readmore

<readmore
  class='readmore-example'
  :text="'This is Text Example, you can replace it as any text as you want, and as long as you want.'"
  :hideType="'LINE'"
  :maxLength="2"
  :moreText="'▼'"
  :lessText="'▲'">
</readmore>
.readmore-example {
  width: 100px;
}

<readmore
  class='readmore-example'
  :text="'This is Text Example, you can replace it as any text as you want, and as long as you want.'"
  :hideType="'LINE'"
  :maxLength="2"
  :moreText="'/expand.png'"
  :lessText="'/collapse.png'"
  :isImage="true">
</readmore>
.readmore-example {
  width: 100px;
}

4.2 tip

<tip class="tip" 
  :content="'This is Text Example, you can replace it as any text as you want, and as long as you want.'"
  :tip="'This is Text Example, you can replace it as any text as you want, and as long as you want.'"></tip>

<tip>
    <template v-slot:content>
      <div>Content Slot Test</div>
    </template>
    <template v-slot:tip>
      <div>Tip Slot Test</div>
    </template>
  </tip>