代码拉取完成,页面将自动刷新
更多,文本展开, 文本过长在文本末添加展开/收起的按钮的组件 浮动提示,鼠标移入时显示提示内容
npm i @colinxu91/readmore
vue 引入 module和install, 参照examples里面的main.js
import readmore from '../packages/index';
app.use(readmore);
3.1 readmore
属性 | 说明 |
---|---|
text | 完整文本 |
moreText | 文本过长,需要展开时的提示文本 |
lessText | 文本过长,展开后需要隐藏时的提示文本 |
hideType | 隐藏规则,字符长度CHAR,单词个数WORD,行数LINE |
maxLength | 最大长度 |
isImage | 是否使用图片作为提示标签 |
3.2 tip
property | coment |
---|---|
content | 显示内容 |
tip | 鼠标移入时显示的提示内容 |
可以使用slot来创建content和tip模板 |
<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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。