ReadMore 展开阅读更多

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

平台差异说明

App(vue)	App(nvue)	H5	微信小程序
√	√	√	√

基本使用

通过slot传入正文内容

<template>
  <su-read-more show-height="150">
    <rich-text :nodes="content"></rich-text>
  </su-read-more>
</template>

<script setup>
  import { ref } from 'vue'

  const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
</script>

兼容性

由于一些微信小程序平台的渲染能力的问题，在解析su-parse组件内容时会比较耗时，导致read-more组件内部无法准确得知 内容的高度，而出现计算错误，这种情况下，我们需要借助su-parse组件的@load(内容多为文字时)或者@ready(内容多为图片时，可能会有较大延时)事件，通过ref 重新初始化read-more组件的高度，如下：

<template>
  <su-read-more ref="uReadMoreRef" show-height="400">
    <su-parse :html="content" @load="parseLoaded"></su-parse>
  </su-read-more>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  // 创建响应式数据
  const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)

  // 创建组件引用
  const uReadMoreRef = ref(null)

  // 定义方法
  function load() {
    if (uReadMoreRef.value) {
      uReadMoreRef.value.init()
    }
  }

  // 如果需要在组件挂载后调用 load 方法，可以使用 onMounted 钩子
  onMounted(() => {
    load()
  })
</script>

展开收起

配置toggle为true，展开后可以收起，否则展开后没有收起的按钮

<su-read-more :toggle="true">
  <rich-text :nodes="content"></rich-text>
</su-read-more>

配置展开高度

可以配置一个高度，单位rpx，只有slot传入的内容高度超出这个值，才会出现"展开阅读全文"字样的按钮

<su-read-more show-height="600">
  <rich-text :nodes="content"></rich-text>
</su-read-more>

异步初始化

有时候需要展示的内容是从后端获取的，组件内部的mounted生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是this.$nextTick)，通过ref调用组件的init方法，重新初始化

<template>
  <su-read-more ref="uReadMoreRef">
    <rich-text :nodes="content"></rich-text>
  </su-read-more>
</template>

<script setup>
  import { ref, onMounted } from 'vue'

  // 创建响应式数据
  const content = ref('')

  // 创建组件引用
  const uReadMoreRef = ref(null)

  // 模拟后端请求
  async function fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
      苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
      无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
      }, 2000)
    })
  }

  // 在组件挂载后调用
  onMounted(async () => {
    const text = await fetchData()
    content.value = text

    // 等待 DOM 更新
    await nextTick()

    // 调用子组件的 init 方法
    if (uReadMoreRef.value) {
      uReadMoreRef.value.init()
    }
  })
</script>

自定义样式

此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整shadow-style对象，此对象内部如下：

{
    // #ifndef APP-NVUE
    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
    // #endif
    // #ifdef APP-NVUE
    // nvue上不支持设置复杂的backgroundImage属性
    backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
    // #endif
    paddingTop: "100px",
    marginTop: "-100px",
}

如果您不想要阴影，将backgroundImage设置为none即可，关于paddingTop和marginTop自行调整至合适数值即可。

<template>
  <su-read-more ref="uReadMore1" :shadow-style="shadowStyle" :show-height="200">
    <rich-text :nodes="content"></rich-text>
  </su-read-more>
</template>

<script setup>
  import { reactive } from 'vue'

  const state = reactive({
    content: '',
    shadowStyle: {
      backgroundImage: 'none',
      paddingTop: '0',
      marginTop: '20rpx'
    }
  })
</script>

示例源码

点击可以查看 右侧演示页面的源码

API

Props

参数	说明	类型	默认值	可选值
show-height	内容超出此高度才会显示展开全文按钮，单位rpx	String | Number	400	-
toggle	展开后是否显示收起按钮	Boolean	false	true
close-text	关闭时的提示文字	String	展开阅读全文	-
font-size	提示文字的大小，单位rpx	String | Number	28	-
open-text	展开时的提示文字	String	收起	-
color	提示文字的颜色	String	#2979ff	-
shadow-style	对阴影的自定义处理，对象形式	Object	见上方说明	-
text-indent	段落首行缩进的字符个数，无需缩进请设置为0	String	2em	-
name	用于在open和close事件中当作回调参数返回	String | Number	-	-

Methods

此方法如要通过ref手动调用

名称	说明
init	重新初始化组件内部高度计算过程，如果内嵌su-parse组件时可能需要用到

Events

事件名	说明	回调参数
open	内容被展开时触发	name - props中传入的name参数值
close	内容被收起时触发	name - props中传入的name参数值