TextEllipsis 文本省略

用于对过长文本内容进行多行超出截断并展示省略号，同时支持点击一键“展开 / 收起”完整文本的文本渲染控件。

---

代码示例

1. 基础多行截断 (Rows)

通过 text 传入长文本，使用 rows 指定最多允许显示的行数（默认 3 行）。

<template>
  <mu-text-ellipsis :text="longContent" :rows="2" />
</template>

<script setup>
import { ref } from 'vue'
const longContent = ref('木智宇 UI 是基于 Vue3 与 UniApp 打造的全端无缝响应式组件库，全面接入极奢黑白熊猫风格与 OLED 纯黑反色暗黑模式。')
</script>

---

2. 自定义展开与收起文案 (Custom Action Text)

使用 expand-text 与 collapse-text 属性自定义展开与收起按钮的文本提示。

<template>
  <mu-text-ellipsis
    :text="longContent"
    :rows="2"
    expand-text="显示全部 ∨"
    collapse-text="收起内容 ∧"
  />
</template>

---

3. 仅截断不展开 (Expandable)

设置 :expandable="false" 可以只保留文本行数截断与省略号，隐藏下方的展开按钮。

<template>
  <mu-text-ellipsis :text="longContent" :rows="2" :expandable="false" />
</template>

---

4. 插槽与展开监听 (Slot & Events)

不仅可以通过 text 属性传参，也可以使用默认插槽嵌套长文本，并通过 @change 监听展开/收起状态。

<template>
  <mu-text-ellipsis :rows="2" @change="handleChange">
    木智宇 UI 是基于 Vue3 与 UniApp 打造的全端无缝响应式组件库。
  </mu-text-ellipsis>
</template>

<script setup>
const handleChange = (isExpanded) => {
  console.log('当前是否展开:', isExpanded)
}
</script>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
text	需要截断的长文本字符串	String	-	''
rows	最多展示的文本行数	Number | String	-	3
expandable	是否显示展开/收起切换按钮	Boolean	true | false	true
expandText	展开按钮显示的文案	String	-	'展开'
collapseText	收起按钮显示的文案	String	-	'收起'

---

插槽说明 (Slots)

插槽名	说明
default	文本内容插槽 (优先级低于 text 属性)

---

事件说明 (Events)

事件名	说明	回调参数
change	展开或收起状态切换时触发	(isExpanded: Boolean)
click-action	点击展开/收起按钮时触发	(isExpanded: Boolean)