Sard

Appearance

100%
在新窗口打开⤴

Ellipsis文本省略

介绍 ​

对长文本进行省略，支持展开和收起，并可自定义展示行数、省略位置和省略符号。

代码演示 ​

基础用法 ​

使用 content 属性设置内容，默认展示 1 行，超过 1 行显示省略号。

vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" />
  </s-card>
</template>

<script setup lang="ts">
import { contentEn } from './shared'
</script>
vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" />
  </s-card>
</template>

<script setup lang="js">
import { contentEn } from './shared'
</script>

展开/收起 ​

当设置 expand-text 和 collapse-text 时，超过行数支持展开和收起。

vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" expand-text="展开" collapse-text="收起" />
  </s-card>
</template>

<script setup lang="ts">
import { contentEn } from './shared'
</script>
vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" expand-text="展开" collapse-text="收起" />
  </s-card>
</template>

<script setup lang="js">
import { contentEn } from './shared'
</script>

自定义展示行数 ​

通过设置 rows 限制展示行数。

vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" expand-text="展开" collapse-text="收起" :rows="2" />
  </s-card>
</template>

<script setup lang="ts">
import { contentEn } from './shared'
</script>
vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" expand-text="展开" collapse-text="收起" :rows="2" />
  </s-card>
</template>

<script setup lang="js">
import { contentEn } from './shared'
</script>

自定义省略符号 ​

通过 dots 属性可以自定义省略符号。

vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" dots="~~~" expand-text="更多" collapse-text="收起" />
  </s-card>
</template>

<script setup lang="ts">
import { contentEn } from './shared'
</script>
vue
<template>
  <s-card>
    <s-ellipsis :content="contentEn" dots="~~~" expand-text="更多" collapse-text="收起" />
  </s-card>
</template>

<script setup lang="js">
import { contentEn } from './shared'
</script>

自定义省略位置 ​

通过设置 position 控制省略位置，支持头部省略、中部省略和尾部省略，默认尾部省略。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="start"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="middle"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="end"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="ts">
import { contentEn } from './shared'
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="start"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="middle"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="contentEn"
        :rows="3"
        position="end"
        expand-text="更多"
        collapse-text="收起"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { contentEn } from './shared'
</script>

动态切换 ​

演示属性改变时重新渲染的效果。

vue
<template>
  <s-list card>
    <s-list-item>
      <s-segmented v-model="text" :options="contentOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="rows" :options="rowOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="position" :options="positionOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="expanded" :options="expandOptions" />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="text"
        expand-text="展开"
        collapse-text="收起"
        :expanded="expanded"
        :rows="rows"
        :position="position"
        @change="onChange"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { contentEn, contentZh } from './shared'
import { type EllipsisPosition } from 'sard'

const contentOptions = [
  { label: 'contentEn', value: contentEn },
  { label: 'contentZh', value: contentZh },
]

const positionOptions = [
  { label: 'start', value: 'start' },
  { label: 'middle', value: 'middle' },
  { label: 'end', value: 'end' },
]

const rowOptions = [
  { label: '1行', value: 1 },
  { label: '2行', value: 2 },
  { label: '3行', value: 3 },
]

const expandOptions = [
  { label: '展开', value: true },
  { label: '收起', value: false },
]

const text = ref(contentEn)
const rows = ref(2)
const position = ref<EllipsisPosition>('start')

const expanded = ref(false)

const onChange = (value: boolean) => {
  expanded.value = value
}
</script>
vue
<template>
  <s-list card>
    <s-list-item>
      <s-segmented v-model="text" :options="contentOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="rows" :options="rowOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="position" :options="positionOptions" />
    </s-list-item>
    <s-list-item>
      <s-segmented v-model="expanded" :options="expandOptions" />
    </s-list-item>
    <s-list-item>
      <s-ellipsis
        :content="text"
        expand-text="展开"
        collapse-text="收起"
        :expanded="expanded"
        :rows="rows"
        :position="position"
        @change="onChange"
      />
    </s-list-item>
  </s-list>
</template>

<script setup lang="js">
import { ref } from 'vue'
import { contentEn, contentZh } from './shared'
import 'sard'
const contentOptions = [
  {
    label: 'contentEn',
    value: contentEn,
  },
  {
    label: 'contentZh',
    value: contentZh,
  },
]
const positionOptions = [
  {
    label: 'start',
    value: 'start',
  },
  {
    label: 'middle',
    value: 'middle',
  },
  {
    label: 'end',
    value: 'end',
  },
]
const rowOptions = [
  {
    label: '1行',
    value: 1,
  },
  {
    label: '2行',
    value: 2,
  },
  {
    label: '3行',
    value: 3,
  },
]
const expandOptions = [
  {
    label: '展开',
    value: true,
  },
  {
    label: '收起',
    value: false,
  },
]
const text = ref(contentEn)
const rows = ref(2)
const position = ref('start')
const expanded = ref(false)
const onChange = (value) => {
  expanded.value = value
}
</script>

API ​

EllipsisProps ​

属性描述类型默认值
content文本内容string''
rows展示行数number1
position省略位置EllipsisPosition'end'
dots省略符号string'...'
expand-text展开按钮文本string-
collapse-text收起按钮文本string-
expanded是否默认展开booleanfalse

EllipsisEmits ​

事件描述类型
update:expanded展开状态变化时触发(expanded: boolean) => void
change点击切换按钮时触发(expanded: boolean) => void

EllipsisPosition ​

ts
type EllipsisPosition = 'start' | 'middle' | 'end'

主题定制 ​

样式变量 ​

CSS 变量值
--s-ellipsis-action-margin-startvar(--s-size-2xs)
--s-ellipsis-action-colorvar(--s-color-primary)

Released under the MIT License.

Copyright © 2023-present wuzhitao