<bst-text-ellipsis/> 文本省略组件

功能

• 支持设置文本省略的位置（开始、中间、结尾）
• 支持自定义文本省略符号
• 支持多行文本省略
• 支持文本省略的时候鼠标划入默认展示所有文本
• 支持动态更新文本展示省略

基础使用

头部省略

中部省略

尾部省略

自定义省略号

多行文本省略

组件描述

<template>
<div>
  <bst-module>
    <div style="display:inline-block;margin-right:8px;">
      <h4>头部省略</h4>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" position="start"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>中部省略</h4>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" position="center"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>尾部省略</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;">
      <h4>自定义省略号</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis content="床前看月光，疑是地上霜。举头望山月，低头思故乡。" dots="---"/>
      </div>
    </div>
    <div style="display:inline-block;margin-right:8px;vertical-align: top;">
      <h4>多行文本省略</h4>
      <div style="width: 120px;border:1px solid gray;">
        <bst-text-ellipsis :rows="2" content="床前看月光，疑是地上霜。举头望山月，低头思故乡。床前看月光，疑是地上霜。"/>
      </div>
      <div style="width: 120px;border:1px solid gray;margin-top: 8px;">
        <bst-text-ellipsis :rows="3" content="床前看月光，疑是地上霜。举头望山月，低头思故乡。"/>
      </div>
    </div>
  </bst-module>
</div>
</template>

显示代码

Props

参数	说明	类型	默认值
content	需要展示的文本	String	-
rows	展示的行数	Number	-
dots	省略号的文本内容	String	...
position	省略位置，可选值[start,middle,end]	String	end

Methods

方法名	说明	参数	返回值
-	-	-	-

Events

事件名称	说明
-	-

Slots

name	说明
-	-

编辑此文档 (opens new window)