vue-ellipsis-3

一个高性能、可自定义的 vue3 文本缩略组件。

Vue 2.x 版本：vue-ellipsis-component

React 版本：react-ellipsis

Demo

安装

推荐使用 npm 或是 yarn 进行组件安装：

# npm
npm i vue-ellipsis-3
# or yarn
yarn add vue-ellipsis-3

注册组件

全局注册

import VueEllipsis3 from 'vue-ellipsis-3';

app.use(VueEllipsis3);

在组件中注册

<script>
import { VueEllipsis3 } from 'vue-ellipsis-3';

export default {
  components: {
    VueEllipsis3,
  },
};
</script>

使用

<template>
  <vue-ellipsis-3 text="这是一段非常非常非常非常非常非常非常非常非常非常非常长的话" />
</template>

vue-ellipsis-3 只是在 vue-ellipsis-component 上做迁移，更多示例可以完全参考 vue-ellipsis-component。

属性

属性名	类型	默认值	描述
text	string	Required	需要进行缩略的文本
visibleLine	number	1	文本可见行数；超过该行数时文本会进行裁剪。visibleLine 不可大于 maxLine
visibleHeight	number		文本可见高度；超过该高度时文本会进行裁剪，优先级高于 visibleLine。visibleHeight 不可大于 maxHeight
ellipsis	boolean	true	是否开启缩略
ellipsisNode	string	...	自定义缩略符
endExcludes	(string | RegExp)[]	[]	结尾处希望被过滤掉的字符（在缩略符之前），支持字符串和正则表达式
useInnerHtml	boolean	false	将 text 当做 HTML 进行缩略（请确保传递的 text 安全可靠，否则可能导致 XSS 安全问题）
maxLine	number		和 visibleLine 配合使用，当行数超过 maxLine 时缩略成 visibleLine 行，具体查看：超过 n 行时展示 m 行
maxHeight	number		和 visibleHeight 配合使用，当文本高度超过 maxHeight 时缩略成 visibleHeight，具体查看：超过高度 n 时，展示高度 m
reflowOnResize	boolean		容器大小改变时是否重新布局，原生缩略支持时默认是 true，否则为 false
onReflow	(ellipsis: boolean, text: string) => void		重排完成回调事件。参数 ellipsis 表示文本是否被截断；参数 text 为可见文本（不包含缩略符）
onEllipsisClick	() => void		缩略符点击回调事件

插槽

名称	描述
ellipsisNode	自定义缩略符，优先级高于 ellipsisNode 属性，若是同时设置，则以 slot 为准

License

MIT

Develop & Contribution

# install deps of component
yarn
# start the frontend server
yarn dev
# run unit test
yarn test

If you want to contribute your code, send a pull request in github.