vue-ellipsis-3

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

48,433 15

vue3 component clamp ellipsis

Maintainer: ruofee

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

React 版本：react-ellipsis

推荐使用 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` 为准

MIT

# 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.

Related Packages

vue-clamp

Clamping primitives for Vue.

831,413 842

clamp ellipsis text-overflow truncate vue

@boyuai/vue-clamp

Clamping multiline contents with ease.

1,449 8

clamp ellipsis clamp-text multiline-text truncate-text vue

@clampy-js/vue-clampy

Vue.js (2+) directive that clamps the content of an element by adding an ellipsi...

22,501 75

clamp ellipsis clampy clampy-js vue vue-directive vuejs

vue-ellipsis

a substr component of vue2.js

10,053 24

ellipsis vue2

vue3-text-clamp

Vue3 component which allows you to ellipsis your multiline text.

841,930 62

ellipsis vue3 text-clamp text-overflow typescript