小程序初始提交

cool-unix/pages/demo/data/read-more.uvue

@@ -0,0 +1,110 @@
+<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>