Tuniao UI Uniapp V3

Appearance

12:13

TnReadMore-阅读更多 ​

阅读更多组件一般用于收起长文本，点击展开全文。

如果当前内容需要付费查看也可以使用该组件，点击查看更多后才进行展示付费内容。

组件位置 ​

typescript
import TnReadMore from '@tuniao/tnui-vue3-uniapp/components/read-more/src/read-more.vue'
import TnReadMore from '@tuniao/tnui-vue3-uniapp/components/read-more/src/read-more.vue'
typescript
import TnReadMore from '@/uni_modules/tuniaoui-vue3/components/read-more/src/read-more.vue'
import TnReadMore from '@/uni_modules/tuniaoui-vue3/components/read-more/src/read-more.vue'

平台差异说明 ​

App(vue)H5微信小程序支付宝小程序...
√√√√适配中

基础使用 ​

在默认的slot中放置需要展示的内容

通过height可以设置默认显示的高度，超过该高度后会显示查看更多按钮，默认单位为rpx

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

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

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

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

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

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

<template>
  <TnReadMore>
    <rich-text :nodes="content" />
  </TnReadMore>
</template>

自定义展开、收起操作提示内容 ​

  • 设置expand-text可以自定义展开操作提示内容
  • 设置expand-icon可以自定义展开操作图标
  • 设置fold-text可以自定义收起操作提示内容
  • 设置fold-icon可以自定义收起操作图标
vue
<template>
  <TnReadMore
    expand-text="付费查看"
    expand-icon="lock"
    fold-text="收起"
    fold-icon="up-arrow"
  >
    <rich-text :nodes="content" />
  </TnReadMore>
</template>
<template>
  <TnReadMore
    expand-text="付费查看"
    expand-icon="lock"
    fold-text="收起"
    fold-icon="up-arrow"
  >
    <rich-text :nodes="content" />
  </TnReadMore>
</template>

拦截展开操作、动态获取内容的高度 ​

通过before-expand可以拦截展开操作，返回false或者Promise切reject则不会展开

vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnReadMoreInstance } from '@tuniao/tnui-vue3-uniapp'

const readMoreRef = ref<TnReadMoreInstance>()
const showUnLockContent = ref(false)

const beforeExpand = () => {
  if (showUnLockContent.value) {
    return true
  }
  return new Promise<boolean>((resolve) => {
    uni.showLoading({
      title: '解锁中....',
    })
    setTimeout(() => {
      uni.hideLoading()
      showUnLockContent.value = true
      readMoreRef.value?.resetContentHeight()
      resolve(true)
    }, 2000)
  })
}
</script>

<template>
  <TnReadMore ref="readMoreRef" :before-expand="beforeExpand">
    <rich-text :nodes="content" />
    <rich-text v-if="showUnLockContent" :nodes="unLockContent" />
  </TnReadMore>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnReadMoreInstance } from '@tuniao/tnui-vue3-uniapp'

const readMoreRef = ref<TnReadMoreInstance>()
const showUnLockContent = ref(false)

const beforeExpand = () => {
  if (showUnLockContent.value) {
    return true
  }
  return new Promise<boolean>((resolve) => {
    uni.showLoading({
      title: '解锁中....',
    })
    setTimeout(() => {
      uni.hideLoading()
      showUnLockContent.value = true
      readMoreRef.value?.resetContentHeight()
      resolve(true)
    }, 2000)
  })
}
</script>

<template>
  <TnReadMore ref="readMoreRef" :before-expand="beforeExpand">
    <rich-text :nodes="content" />
    <rich-text v-if="showUnLockContent" :nodes="unLockContent" />
  </TnReadMore>
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnReadMoreInstance } from '@/uni_modules/tuniaoui-vue3'

const readMoreRef = ref<TnReadMoreInstance>()
const showUnLockContent = ref(false)

const beforeExpand = () => {
  if (showUnLockContent.value) {
    return true
  }
  return new Promise<boolean>((resolve) => {
    uni.showLoading({
      title: '解锁中....',
    })
    setTimeout(() => {
      uni.hideLoading()
      showUnLockContent.value = true
      readMoreRef.value?.resetContentHeight()
      resolve(true)
    }, 2000)
  })
}
</script>

<template>
  <tn-read-more ref="readMoreRef" :before-expand="beforeExpand">
    <rich-text :nodes="content" />
    <rich-text v-if="showUnLockContent" :nodes="unLockContent" />
  </tn-read-more>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TnReadMoreInstance } from '@/uni_modules/tuniaoui-vue3'

const readMoreRef = ref<TnReadMoreInstance>()
const showUnLockContent = ref(false)

const beforeExpand = () => {
  if (showUnLockContent.value) {
    return true
  }
  return new Promise<boolean>((resolve) => {
    uni.showLoading({
      title: '解锁中....',
    })
    setTimeout(() => {
      uni.hideLoading()
      showUnLockContent.value = true
      readMoreRef.value?.resetContentHeight()
      resolve(true)
    }, 2000)
  })
}
</script>

<template>
  <tn-read-more ref="readMoreRef" :before-expand="beforeExpand">
    <rich-text :nodes="content" />
    <rich-text v-if="showUnLockContent" :nodes="unLockContent" />
  </tn-read-more>
</template>

API ​

Props ​

属性名说明类型默认值可选值
expand默认是否展开Booleanfalsetrue
height默认显示内容的高度，默认单位是 rpxNumber250-
show-fold是否显示收起按钮Booleantruefalse
expand-text展开显示的文案String显示更多-
expand-icon展开显示的图标Stringdown图标有效值
fold-text收起显示的文案String收起-
fold-icon收起显示的图标Stringup图标有效值
tip-color提示文案的颜色，支持图鸟内置的颜色值、hex、rgb、rgbaString--
before-expand展开前回调() => Promise<boolean> |boolean--

Emits ​

事件名说明类型
expand展开时触发() => void
fold收起时触发() => void

Expose ​

函数名说明类型
resetContentHeight重新设置内容容器的高度() => void

Tuniao UI

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI