TextEllipsis 超出文本省略

当问题太多时可以只展示部分，后面省略显示

基本调用

《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-4...

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

显示代码复制代码复制代码

自定义前缀后缀

new《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动，这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。...[09/14]

<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提示

《华盛顿自由灯塔报》几天前报道称，美国国防部官员透露中国近日进行第十次东风-4...

<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，文本省略的时候	-