代码拉取完成,页面将自动刷新
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
npm i @colinxu91/readmore
import module and install in Vue,reference to examples/main.js
import readmore from '../packages/index';
app.use(readmore);
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.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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。