# TextEllipsis 超出文本省略

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

TIP

1.0.4+

# 基本调用

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

Expand Copy

# 自定义前缀后缀

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

Expand Copy

# 自定义更多

new ...查看更多
<avue-text-ellipsis :text="text" :height="100" :width="200" :is-limit-height="isLimitHeight" @show="show"
  @hide="hide">
  <el-tag slot="before" size="small">new</el-tag>
  <small slot="more"><span>...</span><span class="link" @click="isLimitHeight=false">查看更多</span></small>
  <small slot="after" class="link" v-if="!isLimitHeight" @click="isLimitHeight=true">收起</small>
</avue-text-ellipsis>
<script>
export default {
  data() {
      return {
        text: "《华盛顿自由灯塔报》几天前报道称,美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动,这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。",
        isLimitHeight: true
      }
  }
}
</script>

Expand Copy

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

...
<avue-text-ellipsis :key="text" :text="text" :height="40" :width="200" use-tooltip placement="top">
  <small slot="more">...</small>
</avue-text-ellipsis>
<script>
export default {
   data() {
      return {
        text: "《华盛顿自由灯塔报》几天前报道称,美国国防部官员透露中国近日进行第十次东风-41洲际导弹的试射活动,这次试射中东风-41导弹投射了多个弹头并成功命中中国西部靶场目标。"
      }
  },
  methods: {
    show() {
      this.$message.success('show');
    },
    hide() {
      this.$message.success('hide')
    }
  }
}
</script>

Expand Copy

# 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,文本省略的时候 -
Last Updated: 7/29/2021, 2:59:35 PM