youxi-app/pages/demo/data/read-more.uvue

<template>
	<cl-page>
		<view class="p-3">
			<demo-item :label="t('基础用法')">
				<cl-read-more>
					<cl-text>
						云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。
						一枝红艳露凝香，云雨巫山枉断肠。借问汉宫谁得似？可怜飞燕倚新妆。
						名花倾国两相欢，常得君王带笑看。解释春风无限恨，沉香亭北倚阑干。
					</cl-text>
				</cl-read-more>
			</demo-item>

			<demo-item :label="t('禁用切换按钮')">
				<cl-read-more
					v-model="visible"
					:disabled="disabled"
					:expand-text="disabled ? '付费解锁' : '展开'"
					:expand-icon="disabled ? 'lock-line' : 'arrow-down-s-line'"
					@toggle="toggle"
				>
					<cl-text>
						云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。
						一枝红艳露凝香，云雨巫山枉断肠。借问汉宫谁得似？可怜飞燕倚新妆。
						名花倾国两相欢，常得君王带笑看。解释春风无限恨，沉香亭北倚阑干。
					</cl-text>
				</cl-read-more>
			</demo-item>

			<demo-item :label="t('动态内容')">
				<cl-read-more :content="content" :show-toggle="content != ''" ref="readMoreRef">
					<view
						class="flex flex-row items-center justify-center h-14"
						v-if="content == ''"
					>
						<cl-loading :size="32"></cl-loading>
					</view>
				</cl-read-more>
			</demo-item>

			<demo-item :label="t('自定义高度')">
				<cl-read-more :height="300">
					<cl-text>
						云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。
						一枝红艳露凝香，云雨巫山枉断肠。借问汉宫谁得似？可怜飞燕倚新妆。
					</cl-text>

					<cl-image
						:height="300"
						width="100%"
						:pt="{
							className: 'my-3'
						}"
						src="https://unix.cool-js.com/images/demo/bg1.png"
					></cl-image>

					<cl-text>
						名花倾国两相欢，常得君王带笑看。解释春风无限恨，沉香亭北倚阑干。
					</cl-text>
				</cl-read-more>
			</demo-item>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { t } from "@/locale";
import DemoItem from "../components/item.uvue";
import { ref } from "vue";
import { useUi } from "@/uni_modules/cool-ui";

const ui = useUi();

const visible = ref(false);
const disabled = ref(true);

const readMoreRef = ref<ClReadMoreComponentPublicInstance | null>(null);
const content = ref("");

function getContent() {
	setTimeout(() => {
		content.value =
			"云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。一枝红艳露凝香，云雨巫山枉断肠。借问汉宫谁得似？可怜飞燕倚新妆。名花倾国两相欢，常得君王带笑看。解释春风无限恨，沉香亭北倚阑干。";

		// 使用 slot 插入内容时，如果内容发生变化，需要重新获取高度
		// readMoreRef.value!.getContentHeight();
	}, 500);
}

function toggle(isExpanded: boolean) {
	ui.showConfirm({
		title: "提示",
		message: "需支付100元才能解锁全部内容，是否继续？",
		callback(action) {
			if (action == "confirm") {
				ui.showToast({
					message: "支付成功"
				});

				disabled.value = false;
				visible.value = true;
			}
		}
	});
}

onReady(() => {
	getContent();
});
</script>