BizEllipsis 溢出省略

单行 / 指定行数省略号截断（原生 line-clamp，零依赖），hover tooltip 展示全文；可选「展开 / 收起」交互模式。表格列、卡片、详情页长文本通用。

基础用法

单行省略：

挥发性有机物在线监测系统建设方案：面向工业园区重点排污企业，布设 128 个监测微站，覆盖厂界无组织排放与治理设施进出口，数据经边缘计算网关分钟级汇聚至监管平台，结合气象数据与扩散模型实现污染溯源，支持超标告警、工单派发与整改闭环，整体建设周期 90 天。

三行省略（hover 看全文）：

可展开收起：

lines 控制截断行数；expandable 开启展开 / 收起交互（展开时不截断）。

<script setup lang="ts">
/** 基础用法：单行省略 / 三行省略（tooltip 看全文）/ 可展开收起 */
import { ElMessage } from 'element-plus'
import { BizEllipsis } from 'vue3-ep-biz-lib'

const longText =
  '挥发性有机物在线监测系统建设方案：面向工业园区重点排污企业，布设 128 个监测微站，覆盖厂界无组织排放与治理设施进出口，数据经边缘计算网关分钟级汇聚至监管平台，结合气象数据与扩散模型实现污染溯源，支持超标告警、工单派发与整改闭环，整体建设周期 90 天。'

const onExpand = (expanded: boolean): void => {
  ElMessage.info(expanded ? '已展开' : '已收起')
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px">
    <div>
      <p style="margin: 0 0 4px">单行省略：</p>
      <BizEllipsis :text="longText" />
    </div>
    <div>
      <p style="margin: 0 0 4px">三行省略（hover 看全文）：</p>
      <BizEllipsis :text="longText" :lines="3" />
    </div>
    <div>
      <p style="margin: 0 0 4px">可展开收起：</p>
      <BizEllipsis :text="longText" :lines="2" expandable @expand-change="onExpand" />
    </div>
  </div>
</template>

卡片场景与外部控制

停机公告升级停机窗口说明

系统升级公告：平台将于 2026-09-26 02:00 - 06:00 进行数据库迁移与版本发布，期间订单下单、支付回调、库存同步等核心链路可能出现分钟级中断。迁移完成后按流量灰度放量，预计 08:00 前全量恢复。如遇异常请通过值班热线 400-800-9000 联系运维值班，或在工作台提交工单，紧急问题请直接联系二线负责人。

default 插槽富文本（tooltip 仍显示 text 全文）：

置顶系统升级公告：平台将于 2026-09-26 02:00 - 06:00 进行数据库……

详情卡片内三行截断 + 展开/收起（expand-text / collapse-text 自定义文案），toggle() 支持外部按钮控制同一实例；default 插槽渲染富文本，tooltip 仍展示 text 全文。

<script setup lang="ts">
/** 进阶：详情卡片多行展开收起（自定义文案 + 外部 toggle 受控）、default 插槽富文本展示 */
import { ref } from 'vue'
import { ElButton, ElTag } from 'element-plus'
import { BizEllipsis } from 'vue3-ep-biz-lib'
import type { BizEllipsisInstance } from 'vue3-ep-biz-lib'

const notice =
  '系统升级公告：平台将于 2026-09-26 02:00 - 06:00 进行数据库迁移与版本发布，期间订单下单、支付回调、库存同步等核心链路可能出现分钟级中断。迁移完成后按流量灰度放量，预计 08:00 前全量恢复。如遇异常请通过值班热线 400-800-9000 联系运维值班，或在工作台提交工单，紧急问题请直接联系二线负责人。'

const ellipsisRef = ref<BizEllipsisInstance>()
const expanded = ref(false)

const onExpandChange = (value: boolean): void => {
  expanded.value = value
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 480px">
    <div style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 14px 16px">
      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px">
        <ElTag size="small" type="danger">停机公告</ElTag>
        <span style="font-weight: 600">升级停机窗口说明</span>
        <ElButton link type="primary" size="small" @click="ellipsisRef?.toggle()">
          外部{{ expanded ? '收起' : '展开' }}（toggle）
        </ElButton>
      </div>
      <BizEllipsis
        ref="ellipsisRef"
        :text="notice"
        :lines="3"
        expandable
        expand-text="查看完整公告"
        collapse-text="收起公告"
        @expand-change="onExpandChange"
      />
    </div>
    <div>
      <p style="margin: 0 0 4px; font-size: 13px; color: var(--el-text-color-secondary)">default 插槽富文本（tooltip 仍显示 text 全文）：</p>
      <BizEllipsis :text="notice" :lines="2">
        <span>
          <ElTag size="small" type="warning" style="margin-right: 6px">置顶</ElTag>
          {{ notice.slice(0, 42) }}……
        </span>
      </BizEllipsis>
    </div>
  </div>
</template>

商品卡片列表

工业级温湿度变送器

适用于仓储与车间环境的温湿度连续监测，485 总线输出，量程 -40~85℃ / 0~100%RH，年漂移小于 1%，支持分组校准与远程标定，配套边缘网关实现分钟级上报。

¥ 328.00

声学成像巡检仪

基于 124 麦克风阵列的气体泄漏与局部放电定位，快速生成声学热力图。

¥ 89,900.00

激光甲烷遥测仪

手持式远距离甲烷泄漏检测，最远 100 米，响应时间 0.1 秒，内置蓝牙与 GPS，适用于燃气管道巡线、场站安检与应急救援场景，IP67 防护等级，-20℃ 低温可正常启动。

¥ 56,000.00

电商卡片场景：简介 lines=2 省略 + expandable 展开 / 收起，短文案与长文案卡片高度对齐（flex 布局），价格区固定在卡片底部。

<script setup lang="ts">
/** 场景：商品卡片列表——简介两行省略 + 展开/收起，卡片高度对齐 */
import { BizEllipsis } from 'vue3-ep-biz-lib'

interface GoodsCard {
  id: number
  name: string
  intro: string
  price: string
}

const goods: GoodsCard[] = [
  {
    id: 1,
    name: '工业级温湿度变送器',
    intro: '适用于仓储与车间环境的温湿度连续监测，485 总线输出，量程 -40~85℃ / 0~100%RH，年漂移小于 1%，支持分组校准与远程标定，配套边缘网关实现分钟级上报。',
    price: '¥ 328.00',
  },
  {
    id: 2,
    name: '声学成像巡检仪',
    intro: '基于 124 麦克风阵列的气体泄漏与局部放电定位，快速生成声学热力图。',
    price: '¥ 89,900.00',
  },
  {
    id: 3,
    name: '激光甲烷遥测仪',
    intro: '手持式远距离甲烷泄漏检测，最远 100 米，响应时间 0.1 秒，内置蓝牙与 GPS，适用于燃气管道巡线、场站安检与应急救援场景，IP67 防护等级，-20℃ 低温可正常启动。',
    price: '¥ 56,000.00',
  },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-width: 760px">
    <div
      v-for="item in goods"
      :key="item.id"
      style="display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px"
    >
      <span style="font-weight: 600">{{ item.name }}</span>
      <!-- 简介两行省略，可展开查看全文（展开态自动关闭 tooltip） -->
      <BizEllipsis :text="item.intro" :lines="2" expandable />
      <span style="margin-top: auto; color: var(--el-color-danger); font-weight: 600">{{ item.price }}</span>
    </div>
  </div>
</template>

表格备注列省略

表格场景：备注列两行省略 + hover 全文，长文本不撑高表格行。

<script setup lang="ts">
/** 场景：表格备注列——两行省略 + hover 全文，不撑高行 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizEllipsis } from 'vue3-ep-biz-lib'

const rows = [
  { id: 1, title: '冷机 3 号保养', remark: '更换冷冻油与干燥过滤器，检查压缩机运行电流与油位，测试高低压保护定值并记录本次保养基数，供下次对比分析。' },
  { id: 2, title: '消防月检', remark: '烟感与喷淋例行检查。' },
  { id: 3, title: '配电房巡检', remark: '红外测温发现 B 相母排温度 68℃（阈值 70℃），已上报并安排负荷转移，持续观察 48 小时，复测合格后关闭观察单。' },
]
</script>

<template>
  <ElTable :data="rows" size="small" border style="max-width: 640px">
    <ElTableColumn prop="title" label="工单" width="130" />
    <ElTableColumn label="处理说明（两行省略）">
      <template #default="{ row }">
        <BizEllipsis :text="row.remark" :lines="2" />
      </template>
    </ElTableColumn>
  </ElTable>
</template>

评论列表

1楼

运维-张工09-23 10:24

现场已确认：2 号线输送机停机是因为安全光幕被物料遮挡触发联锁，清理遮挡并复位后恢复运行。建议在光幕前加装导料板，避免同类误停，工单内附照片三张。

2楼

调度-刘敏09-23 10:31

收到，已同步计划排产。

社区场景：楼层号头像排版 + 三行省略「展开全文 / 收起」，短评不显示展开按钮。

<script setup lang="ts">
/** 场景：评论列表——三行省略可展开，时间与楼层号排版 */
import { BizEllipsis } from 'vue3-ep-biz-lib'

const comments = [
  {
    id: 1,
    user: '运维-张工',
    time: '09-23 10:24',
    text: '现场已确认：2 号线输送机停机是因为安全光幕被物料遮挡触发联锁，清理遮挡并复位后恢复运行。建议在光幕前加装导料板，避免同类误停，工单内附照片三张。',
  },
  { id: 2, user: '调度-刘敏', time: '09-23 10:31', text: '收到，已同步计划排产。' },
]
</script>

<template>
  <div style="max-width: 520px; display: flex; flex-direction: column; gap: 12px">
    <div v-for="(comment, index) in comments" :key="comment.id" style="display: flex; gap: 10px">
      <span style="flex-shrink: 0; width: 32px; height: 32px; line-height: 32px; text-align: center; border-radius: 50%; background: var(--el-color-primary-light-8); color: var(--el-color-primary); font-size: 13px">
        {{ index + 1 }}楼
      </span>
      <div style="flex: 1">
        <div style="display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px">
          <span style="font-size: 13px; font-weight: 600">{{ comment.user }}</span>
          <span style="font-size: 12px; color: var(--el-text-color-placeholder)">{{ comment.time }}</span>
        </div>
        <BizEllipsis :text="comment.text" :lines="3" expandable expand-text="展开全文" collapse-text="收起" />
      </div>
    </div>
  </div>
</template>

审批意见流

部门经理同意09-22 17:40

同意本次采购，注意到货后先做入厂检验再入库，检测报告同步归档到质量系统。

财务复核驳回09-22 18:15

发票信息与合同不一致：合同为含税价，发票申请为未税价，请修正后重新提交；预算科目请从「设备购置」调整为「设备更新改造」，两者审批链路不同，改完再走一次。

申请人重新提交09-23 09:02

已按意见修正发票与预算科目，请复核。

审批场景：长意见两行省略 hover 全文（驳回意见含修改指引），最新意见自然完整。

<script setup lang="ts">
/** 场景：审批意见流——历史意见两行省略 hover 全文，最新意见完整展示 */
import { ElTag } from 'element-plus'
import { BizEllipsis } from 'vue3-ep-biz-lib'

const opinions = [
  { id: 1, author: '部门经理', result: '同意', time: '09-22 17:40', text: '同意本次采购，注意到货后先做入厂检验再入库，检测报告同步归档到质量系统。' },
  { id: 2, author: '财务复核', result: '驳回', time: '09-22 18:15', text: '发票信息与合同不一致：合同为含税价，发票申请为未税价，请修正后重新提交；预算科目请从「设备购置」调整为「设备更新改造」，两者审批链路不同，改完再走一次。' },
  { id: 3, author: '申请人', result: '重新提交', time: '09-23 09:02', text: '已按意见修正发票与预算科目，请复核。' },
]
</script>

<template>
  <div style="max-width: 520px; display: flex; flex-direction: column; gap: 10px">
    <div v-for="opinion in opinions" :key="opinion.id" style="display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--el-border-color-lighter); border-radius: 6px">
      <div style="display: flex; gap: 8px; align-items: center">
        <span style="font-size: 13px; font-weight: 600">{{ opinion.author }}</span>
        <ElTag :type="opinion.result === '驳回' ? 'danger' : opinion.result === '同意' ? 'success' : 'info'" size="small">{{ opinion.result }}</ElTag>
        <span style="font-size: 12px; color: var(--el-text-color-placeholder); margin-left: auto">{{ opinion.time }}</span>
      </div>
      <BizEllipsis :text="opinion.text" :lines="2" />
    </div>
  </div>
</template>

Props

属性名	类型	默认值	说明
text	`string`	—（必填）	文本内容
lines	`number`	`1`	截断行数
tooltip	`boolean`	`true`	hover tooltip 展示全文（展开态自动关闭）
expandable	`boolean`	`false`	开启展开 / 收起交互
expand-text	`string`	`'展开'`	展开文案
collapse-text	`string`	`'收起'`	收起文案

Events

事件名	参数	说明
expand-change	`(expanded: boolean)`	展开 / 收起变化

Slots

插槽名	说明
default	覆盖显示内容（tooltip 仍展示 text 全文）

Expose

属性/方法	说明
expanded	当前展开状态
toggle()	手动切换展开 / 收起

BizEllipsis 溢出省略 ​

基础用法 ​

卡片场景与外部控制 ​

商品卡片列表 ​

表格备注列省略 ​

评论列表 ​

审批意见流 ​

Props ​

Events ​

Slots ​

Expose ​