Tuniao UI

Appearance

ReadMore 查看更多 ​

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

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√兼容中兼容中兼容中兼容中

基本使用 ​

内容通过slot传入。

由于部分的小程序平台的渲染能力问题，在解析比较耗费时间的内容时，会导致tn-read-more组件无法获取内容的高度，从而出现计算错误的情况，这时候我们需要手动的调用tn-read-more组件内部的init方法重新初始化。

vue
<template>
  <tn-read-more ref="readMore">
    <rich-text :nodes="content"></rich-text>
  </tn-read-more>
</template>

<script>
  export default {
    data() {
      return {
        content: `噫吁嚱，危乎高哉！
                  蜀道之难，难于上青天！
                  蚕丛及鱼凫，开国何茫然！
                  尔来四万八千岁，不与秦塞通人烟。
                  西当太白有鸟道，可以横绝峨眉巅。
                  地崩山摧壮士死，然后天梯石栈相钩连。
                  上有六龙回日之高标，下有冲波逆折之回川。
                  黄鹤之飞尚不得过，猿猱欲度愁攀援。
                  青泥何盘盘，百步九折萦岩峦。
                  扪参历井仰胁息，以手抚膺坐长叹。

                  问君西游何时还？畏途巉岩不可攀。
                  但见悲鸟号古木，雄飞雌从绕林间。
                  又闻子规啼夜月，愁空山。
                  蜀道之难，难于上青天，使人听此凋朱颜！
                  连峰去天不盈尺，枯松倒挂倚绝壁。
                  飞湍瀑流争喧豗，砯崖转石万壑雷。
                  其险也如此，嗟尔远道之人胡为乎来哉！(也如此 一作：也若此)

                  剑阁峥嵘而崔嵬，一夫当关，万夫莫开。
                  所守或匪亲，化为狼与豺。
                  朝避猛虎，夕避长蛇，磨牙吮血，杀人如麻。
                  锦城虽云乐，不如早还家。
                  蜀道之难，难于上青天，侧身西望长咨嗟！`,

      }
    },
    onReady() {
      this.$nextTick(() => {
        this.$refs.readMore.init()
      })
    }

  }
</script>

设置收起时的高度 ​

可以通过配置showHeight属性来设置组件收起来时默认高度，只有传入内容的高度比这个高度高才会显示openText属性的值。

vue
<tn-read-more :showHeight="600">
  <rich-text :nodes="content"></rich-text>
</tn-read-more>

自定义样式 ​

组件可以通过配置来修改提示文字和图标的信息、底部阴影的样式。

  • 通过设置openText、closeText、openIcon、closeIcon来配置收起和关闭时的提示文字和图标，图标如果为空值则不显示。
  • 在收起时组件在底部有一个默认的白色虚化阴影，如果需要修改当前阴影可以设置shadowStyle属性，默认值如下：
css
{
  backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
  paddingTop: "300rpx",
  marginTop: "-300rpx"
}
vue
<tn-read-more :showHeight="600" openText="付费后解锁剩余内容" openIcon="money">
  <rich-text :nodes="content"></rich-text>
</tn-read-more>

API ​

Props ​

属性名说明类型默认值可选值
showHeight内容显示的默认高度，待显示的内容只有超过这个高度才会显示全文按钮，单位rpxNumber400-
fontColor字体颜色String#01BEFF颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize字体大小Number28-
fontUnit字体大小的单位Stringrpx-
closeBtn显示收起(关闭)按钮Booleanfalsetrue
openText展开文本提示文字String展开阅读全文-
closeText收起(关闭)提示文字String收起-
openIcon展开文本显示的图标，使用TuniaoUI内置的图标库Stringdown-
closeIcon收起(关闭)显示的图标，使用TuniaoUI内置的图标库Stringup-
shadowStyle收起文本时底部的阴影样式Object见上方说明-
index组件标识，用于标记多个组件下点击String|Number--

Slots ​

名称说明
default待展开的内容

Event ​

事件名称说明回调参数
open内容展开时触发index: 组件唯一标识
closed内容收起时触发index: 组件唯一标识

Method ​

名称说明
init重新初始化内部内容的高度，用于异步修改了内容（内容需要耗费时间解析的情况）

Copyright © 2022-present Tuniao UI