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