加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

README.md 2.86 KB

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

一键复制编辑原始数据按行查看历史

提交于 2020-11-23 14:35 . 支持图片作为展开或者收起的标签

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

npm i @colinxu91/readmore
import module and install in Vue，reference to examples/main.js

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

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

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>

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/colinxu91/readmore.git

git@gitee.com:colinxu91/readmore.git

colinxu91

readmore

readmore

master