v-rich-overflow 指令

v-rich-overflow 是一个用于处理富文本溢出的 Vue 指令。支持按字符数或行数截断文本，并提供展开/收起功能。该指令会保留 HTML 标签结构，但会移除媒体标签（img、video、audio）以避免布局问题。

基础用法

loading

配置选项

参数	说明	类型	默认值	必填
num	截断长度（按字符数）或行数	number	120	否
ellipsis	省略号文本	string	'...'	否
moreText	展开按钮文本	string	'展开'	否
lessText	收起按钮文本	string	'收起'	否
buttonClass	按钮自定义类名	string	''	否
buttonStyle	按钮自定义样式	Partial<CSSStyleDeclaration>	{}	否
collapseMode	截断模式	'chars' | 'lines'	'chars'	否

使用示例

按行数截断

<template>
  <div
    v-rich-overflow="{
      num: 3,
      collapseMode: 'lines',
    }"
  >
    <!-- 富文本内容 -->
  </div>
</template>

按字符数截断

<template>
  <div
    v-rich-overflow="{
      num: 100,
      collapseMode: 'chars',
    }"
  >
    <!-- 富文本内容 -->
  </div>
</template>

自定义按钮样式

<template>
  <div
    v-rich-overflow="{
      num: 100,
      buttonClass: 'custom-btn',
      buttonStyle: {
        color: '#1890ff',
        fontWeight: 'bold',
      },
    }"
  >
    <!-- 富文本内容 -->
  </div>
</template>

功能特性

• 智能截断：

  • chars 模式：按字符数智能截断，会自动调整长度以避免破坏单词
  • lines 模式：使用 CSS 的 -webkit-line-clamp 实现多行截断

• 样式继承：

  • 展开/收起按钮会继承文本的字体大小和行高
  • 在 lines 模式下会添加渐变背景效果

• 响应式：

  • 自动监听窗口大小变化
  • 使用防抖优化性能

• 清理机制：

  • 自动移除媒体标签以避免布局问题
  • 组件卸载时自动清理事件监听和状态

注意事项

1. lines 模式依赖 -webkit-line-clamp 属性，在某些旧版浏览器可能不支持
2. 媒体标签（img、video、audio）会在折叠状态下被移除，展开后才会显示
3. 指令会自动处理按钮样式，确保与文本对齐
4. 在动态内容场景下，建议使用 v-safe-html 指令配合使用

浏览器兼容性

• 现代浏览器：完全支持
• IE：不支持 lines 模式
• 移动端：完全支持