A vue component for web developers.
文字溢出隐藏组件,基于vue编写,用于web表单页面,支持移动端。
一、组件功能
- 支持单行、多行文字溢出显示点点点 or【更多】按钮,如下图所示:
- 点击【更多】按钮可展开显示所有文字,点击【收起】按钮可收起文字(视具体情况)。
二、使用演示
三、组件参数及事件
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 内容 | String | "" |
triggerMore | 点击更多时候是否触发展开操作 | Boolean | true |
line | 展示几行文字 | Number | 1 |
hasMore | 是否显示更多按钮 | Boolean | false |
isHtml | 是否是html内容 | Boolean | false |
revealWidth | 更多按钮宽度(若文字被"更多"按钮覆盖,可自行调整此参数) | Number | 70 |
revealText | 更多按钮文案 | String | 【全部】 |
foldText | 收起按钮文案 | String | 收起 |
revealTextColor | 更多按钮文案颜色 | String | '' |
foldTextColor | 收起按钮文案颜色 | String | '' |
slot
支持通过slot的传入内容,优先级高于通过content传入的内容,同时使用只会展示slot传入的内容
<ellipsis-text :hasMore="true">
<div>我是通过slot插入的内容,优先级高于通过content传入的内容</div>
</ellipsis-text>
事件
事件名 | 说明 |
---|---|
reveal | 展开文字时触发 |
fold | 收起文字时触发 |
四、使用方法
1、使用npm 下载组件到项目中,引入即可使用
npm install -s vue-ellipsis-text
name: "app" components: EllipsisText { return content:'这是一段很长的测试文字,是哦,好长啊,才不到30字。' // 标签数据 ; };
<ellipsis-text :content="content"></ellipsis-text>
2、普通html中直接引入使用 [注意:普通html中,如果prop属性为驼峰式,需要修改为连字符形式,方可识别。如:hasMore修改为has-more]
ellipsis-text
五、项目相关操作
- 安装依赖:
npm install
- 运行组件demo(serve with hot reload at localhost:3000):
npm start
- 单元测试(基于Jest + vue-test-utils ):
npm test
- 组件打包,输出用于生产环境的文件(包含esm,amd,cmd,umd规范):
npm run build
单元测试结果(PASSED)
感激
感谢以下的项目,排名不分先后
版权
— MIT License —