TextEllipsis 超出文本省略

按实际渲染高度截断文本，可通过插槽追加省略标记和展开按钮。

基本调用

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-text-ellipsis :text="text"
                      :height="50"
                      :width="200">
    <template #more>
      <small>...</small>
    </template>
  </avue-text-ellipsis>
</template>
<script setup>
import { ref } from 'vue'
const text = ref("《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。")

</script>

自定义前缀后缀

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-text-ellipsis :text="text"
                      :height="100"
                      :width="200">
    <template #more>
      <small>...</small>
    </template>
    <template #before>
      <el-tag>new</el-tag>
    </template>
    <template #after>
      <small>[09/14]</small>
    </template>
  </avue-text-ellipsis>
</template>
<script setup>
import { ref } from 'vue'
const text = ref("《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。")

</script>

当被隐藏文字的时候，使用tooltip提示

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-text-ellipsis :key="text"
                      :text="text"
                      :height="40"
                      :width="200"
                      use-tooltip
                      placement="top">
    <template #more>
      <small>...</small>
    </template>
  </avue-text-ellipsis>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
const text = ref("《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。")

function show () {
  ElMessage.success('show');
}
function hide () {
  ElMessage.success('hide')
}
</script>

Variables

参数	说明	类型	可选值	默认值
text	需要省略的文本	String	-	-
width	限制的宽	Number	-	-
height	限制的高	Number	-	-
is-limit-height	是否开启限制	Boolean	-	true
use-tooltip	是否使用tooltip	Boolean	-	false
placement	tooltip的placement	String	-

Events

事件名	说明	参数
show	当isLimitHeight为true，文本全部展示的时候	-
hide	当isLimitHeight为true，文本省略的时候	-

Slots 与 Methods

插槽	说明
before	文本之前的内容
more	发生截断时显示的内容，例如省略号或展开按钮
after	文本之后的内容

这些插槽没有业务数据参数。通过 ref.init() 可在外部容器尺寸改变后重新测量；text / height / isLimitHeight 变化时组件会自动测量，当前版本没有监听 width 或 ResizeObserver 自动响应容器宽度。

启用高度限制时请传入数值 height（px）；width 也是数值，不传则使用 100%。useTooltip 仅在启用限制且确实发生截断时显示完整文本。设置 isLimitHeight 为 false 展示全部内容，不主动触发 show 事件。