frontend/examking-app/plugins/uview-ui/components/u-read-more/u-read-more.vue

（开头部分） 4KB

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

<template>
	<view class="">
		<view class="u-content" :class="[elId]" :style="{ 
			height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
			textIndent: textIndent
		}">
			<slot></slot>
		</view>
		<view @tap="toggleReadMore" v-if="isLongContent" class="u-content__showmore-wrap"
		    :class="{ 'u-content__show-more': showMore }"
		    :style="[innerShadowStyle]">
			<text class="u-content__showmore-wrap__readmore-btn" :style="{
				fontSize: fontSize + 'rpx',
				color: color
			}">
				{{ showMore ? openText : closeText }}
			</text>
			<view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
				<u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * readMore 阅读更多
	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
	 * @tutorial https://www.uviewui.com/components/readMore.html
	 * @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
	 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
	 * @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
	 * @property {String} text-indent 段落首行缩进的字符个数（默认2em）
	 * @property {String} open-text 展开时的提示文字（默认“收起”）
	 * @property {String} color 提示文字的颜色（默认#2979ff）
	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
	 */
	export default {
		name: "u-read-more",
		props: {
			// 默认的显示占位高度，单位为rpx
			showHeight: {
				type: [Number, String],
				default: 400
			},
			// 展开后是否显示"收起"按钮
			toggle: {
				type: Boolean,
				default: false
			},
			// 关闭时的提示文字
			closeText: {
				type: String,
				default: '展开阅读全文'
			},
			// 展开时的提示文字
			openText: {
				type: String,
				default: '收起'
后面还有 119 行代码，解锁后查看完整代码

24 小时内免费解锁 3 个项目，之后 1 算力/个。 规则说明

AI 解读 AI

登录后可用，每次 10 算力，解读结果公开显示在下面。

还没有人解读过这个文件。