介绍

该组件一般用于内容较长，预先收起一部分，点击再展开全部内容的场景。

代码演示

基础使用

在默认插槽放置任意内容，默认会收起来，点击展开按钮时全部显示。

为了避免滚动到一定位置再收起来的位置跳跃，可以使用 keep-location 属性保持收起后，按钮下面的内容依然在屏幕中原来的位置。

只可用在页面滚动中，如果在 scroll-view 中，需要在 close 事件回调中自行实现。

vue ts

<template>
  <s-read-more>
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="ts">
import { longText } from '@/data/text'
</script>

vue js

<template>
  <s-read-more>
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="js">
import { longText } from '@/data/text'
</script>

收起时最大高度

可以使用 max-height 设置收起时的最大高度。

vue ts

<template>
  <s-read-more :max-height="100">
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="ts">
import { longText } from '@/data/text'
</script>

vue js

<template>
  <s-read-more :max-height="100">
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="js">
import { longText } from '@/data/text'
</script>

按钮文案

使用 open-text 和 close-text 设置展开状态和收起状态时的按钮文案。

vue ts

<template>
  <s-read-more close-text="展开阅读全文" open-text="收起节约空间">
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="ts">
import { longText } from '@/data/text'
</script>

vue js

<template>
  <s-read-more close-text="展开阅读全文" open-text="收起节约空间">
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="js">
import { longText } from '@/data/text'
</script>

隐藏收起按钮

设置 hide-close 后，在展开时不会再显示收起按钮。

vue ts

<template>
  <s-read-more hide-close>
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="ts">
import { longText } from '@/data/text'
</script>

vue js

<template>
  <s-read-more hide-close>
    {{ longText }}
  </s-read-more>
</template>

<script setup lang="js">
import { longText } from '@/data/text'
</script>

API

ReadMoreProps

属性	描述	类型	默认值
max-height	收起时最大展示高度	number	200
hide-close	是否隐藏收起按钮，打开后就不能手动收起来了	boolean	false
open-text	展开状态按钮文案	string	'收起'
close-text	收起状态按钮文案	string	'展开'
visible	控制展开和收起	boolean	false
keep-location	收起时保持按钮下面的内容在屏幕中原来的位置，只可用在页面滚动中	boolean	true

ReadMoreSlots

插槽	描述	属性
default	自定义默认内容	-

ReadMoreEmits

事件	描述	类型
update:visible	展开/收起时触发	(visible: boolean)=> void
open	展开时触发	() => void
close	收起时触发	() => void

主题定制

样式变量

CSS 变量	值
--s-read-more-shadow-max-height	80%
--s-read-more-shadow-height	100px
--s-read-more-shadow-bg	linear-gradient(to bottom, rgba(var(--s-bg-color-container-rgb), 0), rgba(var(--s-bg-color-container-rgb), 1) 95%)