Spicomps

Appearance

Elipsis 文字缩略 ​

输入字符

基础用法 ​

elipsis指定是否缩略。max-lines指定缩略行数，默认 1

省略
怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。
怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。
怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。
<template>
  <div class="demo-container">
    <el-switch
      v-model="isElipsis"
      inline-prompt
      active-text="省略"
      inactive-text="不省略"
    />
    <el-slider v-model="width" :min="100" :max="500" />
  </div>
  <div class="demo-container" :style="`width: ${width}px`">
    <sp-elipsis :text="text" :elipsis="isElipsis" />
  </div>
  <div class="demo-container" :style="`width: ${width}px`">
    <sp-elipsis :text="text" :elipsis="isElipsis" :max-lines="2" />
  </div>
  <div class="demo-container" :style="`width: ${width}px`">
    <sp-elipsis :text="text" :elipsis="isElipsis" :max-lines="3" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isElipsis = ref(true)
const width = ref(230)
const text = ref(
  '怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。'
)
</script>

省略位置 ​

position可以设置省略位置，可选值：end(默认)、middle、start。

省略

怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。
<template>
  <div class="demo-container">
    <el-switch
      v-model="isElipsis"
      inline-prompt
      active-text="省略"
      inactive-text="不省略"
    />
    <el-slider v-model="width" :min="100" :max="300" />
    <br />
    <el-radio v-model="position" value="start">头部</el-radio>
    <el-radio v-model="position" value="middle">中间</el-radio>
    <el-radio v-model="position" value="end">尾部</el-radio>
  </div>
  <div class="demo-container" :style="`width: ${width}px`">
    <sp-elipsis
      :text="text"
      :elipsis="isElipsis"
      :max-lines="3"
      :position="position"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isElipsis = ref(true)
const width = ref(230)
const text = ref(
  '怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。'
)

const position = ref('end')
</script>

插槽 ​

插槽作用域抛出两个参数：isOver 是否溢出， elipsis 是否处于收缩状态

怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。
<template>
  <div class="demo-container">
    <el-slider v-model="width" :min="100" :max="500" />
  </div>
  <div
    class="demo-container elipsis-slot-container"
    :style="`width: ${width}px`"
  >
    <sp-elipsis :text="text" :elipsis="isElipsis" :max-lines="3">
      <template #suffix="scope">
        <sp-button
          v-if="scope.isOver"
          size="small"
          text
          type="info"
          @click="isElipsis = !isElipsis"
          >{{ scope.elipsis ? '展开' : '收缩' }}</sp-button
        >
      </template>
    </sp-elipsis>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const isElipsis = ref(true)
const text = ref(
  '怅卧新春白袷衣，白门寥落意多违。红楼隔雨相望冷，珠箔飘灯独自归。远路应悲春晼晚，残宵犹得梦依稀。玉珰缄札何由达，万里云罗一雁飞。'
)
const width = ref(230)
</script>

<style>
.elipsis-slot-container {
  width: 230px;
  line-height: 1.5;
}
</style>

API ​

属性名说明类型默认值
elipsis是否收缩booleanfalse
text内容文字(必填)stringinput
max-lines最大行数number1
position省略位置end | start | middleend
lineHeight行高string-

插槽 ​

插槽名说明
prefix前缀
suffix后缀