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 :height="300">
					<cl-text>
						云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。
						一枝红艳露凝香，云雨巫山枉断肠。借问汉宫谁得似？可怜飞燕倚新妆。
					</cl-text>

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

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

<script lang="ts" setup>
import { router } from "@/cool";
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);

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

				disabled.value = false;
				visible.value = true;
			}
		}
	});
}
</script>

<style lang="scss" scoped></style>