1.0.2 • Published 2 years ago
vue-overflow-ellipsis-q v1.0.2
vue-overlow-ellipsis
原作者:https://github.com/wintc23/vue-overflow-ellipsis 将折叠逻辑整合到了组件内部。
在Vue项目中使用本组件
1. 安装
npm install vue-overflow-ellipsis-q
2. 在项目中引入组件以及依赖
<link rel="stylesheet" href="./dist/vue-overflow-ellipsis.css">
<script src="./dist/vue-overflow-ellipsis.js"></script>
or
import vueOverflowEllipsis from "vue-overflow-ellipsis-q"
import "vue-overflow-ellipsis-q/dist/vue-overflow-ellipsis.css"
3. 使用组件
<template>
<!-- ... -->
<vue-overflow-ellipsis :content="content"></vue-overflow-ellipsis>
<!-- ... -->
</template>
4. API
说明:组件动态计算指定行数的容器能容纳的字符数量,动态截取字符串进行显示。组件内部使用ResizeObserver观察元素的size的变动并调用了refresh方法。但是IE不支持ResizeObserver,所以如果需要兼容IE动态
props
- ellipsis 是否折叠,可以通过 .sync 双向绑定
- content 文本字符串
- rows 文本最大行数,默认是3
- ellipsisText 省略号字符,默认是"..."
- showMoreText 展开按钮的文字,默认是“展开”
- hideMoreText 折叠按钮的文字,默认是“折叠”
- btnShow 是否总是显示按钮,即便未超过最大行数,默认false
events
- show-more 展开按钮点击事件
- show-more 折叠按钮点击事件
源码运行
可以通过git将本项目clone到本地运行。
安装依赖
npm install
启动开发服务
npm run serve