介绍

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

引入

import Ellipsis from 'sard-uniapp/components/ellipsis/ellipsis.vue'

代码演示

基础用法

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

<template>
  <sar-list card>
    <sar-list-item>
      <sar-ellipsis :content="contentEn" />
    </sar-list-item>
  </sar-list>
</template>

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

展开/收起

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

<template>
  <sar-list card>
    <sar-list-item>
      <sar-ellipsis
        :content="contentEn"
        expand-text="展开"
        collapse-text="收起"
      />
    </sar-list-item>
  </sar-list>
</template>

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

自定义展示行数

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

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

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

自定义省略符号

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

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

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

自定义省略位置

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

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

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

动态切换

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

vue lang="ts"

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

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

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 lang="js"

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

<script setup lang="js">
import { ref } from "vue";
import { contentEn, contentZh } from "./shared";
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\u884C", value: 1 },
  { label: "2\u884C", value: 2 },
  { label: "3\u884C", value: 3 }
];
const expandOptions = [
  { label: "\u5C55\u5F00", value: true },
  { label: "\u6536\u8D77", 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

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
content	文本内容	string	''
rows	展示行数	number	1
position	省略位置	EllipsisPosition	'end'
dots	省略符号	string	'...'
expand-text	展开按钮文本	string	-
collapse-text	收起按钮文本	string	-
expanded	是否默认展开	boolean	false

EllipsisEmits

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

EllipsisPosition

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

主题定制

CSS 变量

page,
.sar-portal {
  --sar-ellipsis-action-margin-left: 8rpx;
  --sar-ellipsis-action-color: var(--sar-primary);
}