文字省略提示 - SEllipsis

基于 ATooltip 封装，支持实时计算内容是否超出父元素边界，是否文字省略和 Tooltip 提示

演示

基本用法

基本用法

实时计算内容是否超出父元素边界，是否需要文字省略和 Tooltip 提示。 ellipsis -> 文字省略

一段用来测试 SEllipsis 的文本内容

一段用来测试 SEllipsis 的文本内容

一段用来测试 SEllipsis 的文本内容

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <div
      class="resize-container"
      style="width: 172px"
    >
      <SEllipsis>
        一段用来测试 SEllipsis 的文本内容
      </SEllipsis>
    </div>

    <div
      class="resize-container"
      style="width: 200px"
    >
      <SEllipsis ellipsis>
        一段用来测试 SEllipsis 的文本内容
      </SEllipsis>
    </div>

    <div
      class="resize-container"
      style="width: 250px"
    >
      <SEllipsis ellipsis>
        一段用来测试 SEllipsis 的文本内容
      </SEllipsis>
    </div>
  </ASpace>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
.resize-container {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  box-sizing: border-box;
  border: solid 1px #dddddd;
  border-radius: 5px;
  resize: horizontal;
  cursor: pointer;
  overflow: auto;
}
</style>

自定义 title

自定义 title

默认 default 卡槽内容作为 Tooltip 的提示内容。我们可以自定义 title (使用 prop 或 slot 方式)

一段用来测试 SEllipsis 的文本内容

一段用来测试 SEllipsis 的文本内容

一段用来测试 SEllipsis 的文本内容

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <div
      class="resize-container"
      style="width: 220px"
    >
      <SEllipsis ellipsis>
        一段用来测试 SEllipsis 的文本内容
      </SEllipsis>
    </div>

    <div
      class="resize-container"
      style="width: 220px"
    >
      <SEllipsis
        title="自定义 title 文本内容"
        ellipsis
      >
        一段用来测试 SEllipsis 的文本内容
      </SEllipsis>
    </div>

    <div
      class="resize-container"
      style="width: 220px"
    >
      <SEllipsis ellipsis>
        <template #title>
          <CheckCircleOutlined style="margin-right: 3px;" />
          <span>来自 title 卡槽的提示内容</span>
        </template>

        <template #default>
          一段用来测试 SEllipsis 的文本内容
        </template>
      </SEllipsis>
    </div>
  </ASpace>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
.resize-container {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  box-sizing: border-box;
  border: solid 1px #dddddd;
  border-radius: 5px;
  resize: horizontal;
  cursor: pointer;
  overflow: auto;
}
</style>

打开方式 trigger

打开方式 trigger

默认使用 hover, 我们可以选择 focus、click、contextmenu, 也可以通过 open 自定义。

一段用来测试 SEllipsis 的文本内容

Trigger: hover

一段用来测试 SEllipsis 的文本内容

Trigger: click

一段用来测试 SEllipsis 的文本内容

复制代码

显示代码

<template>
  <ASpace
    :size="15"
    :wrap="true"
    style="margin: 0"
    direction="vertical"
  >
    <ASpace>
      <div
        class="resize-container"
        style="width: 220px"
      >
        <SEllipsis
          title="一段用来测试 SEllipsis 的文本内容"
          ellipsis
        >
          一段用来测试 SEllipsis 的文本内容
        </SEllipsis>
      </div>

      <div>Trigger: hover</div>
    </ASpace>

    <ASpace>
      <div
        class="resize-container"
        style="width: 220px"
      >
        <SEllipsis
          title="一段用来测试 SEllipsis 的文本内容"
          trigger="click"
          ellipsis
        >
          一段用来测试 SEllipsis 的文本内容
        </SEllipsis>
      </div>

      <div>Trigger: click</div>
    </ASpace>

    <ASpace>
      <div
        class="resize-container"
        style="width: 250px"
      >
        <SEllipsis
          title="一段用来测试 SEllipsis 的文本内容"
          :open="open"
          ellipsis
        >
          一段用来测试 SEllipsis 的文本内容
        </SEllipsis>
      </div>

      <AButton @click="open = !open">
        {{ open ? '关闭' : '打开' }}
      </AButton>
    </ASpace>
  </ASpace>
</template>

<script setup lang="ts">
const open = ref(false)
</script>

<style lang="less" scoped>
.resize-container {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  box-sizing: border-box;
  border: solid 1px #dddddd;
  border-radius: 5px;
  resize: horizontal;
  cursor: pointer;
  overflow: auto;
}
</style>

API

Props

参数	说明	类型	默认值
open	手动控制浮层	boolean	-
title	提示文字内容	string | slot	-
color	背景颜色	string	-
trigger	触发行为, hover | focus | click ...	string	hover
inspect	是否实时计算内容是否超出父元素边界	boolean	true
tooltip	是否启用	boolean	true
ellipsis	是否文字省略	boolean	false
placement	气泡框 Tooltip 位置	string	'top'
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	number	0.3
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	number	0.1

Slots

插槽名	插槽说明	插槽参数
default	默认卡槽	-
title	提示文本卡槽	-