# readmore

**Repository Path**: colinxu91/readmore

## Basic Information

- **Project Name**: readmore
- **Description**: readmore，expand text， 文本过长在文本末添加展开/收起的按钮的组件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-28
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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>
```