cl-read-more 添加动态内容示例

pages/demo/data/read-more.uvue

@@ -27,6 +27,17 @@
 				</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>
@@ -53,7 +64,6 @@
 </template>
 
 <script lang="ts" setup>
-import { router } from "@/cool";
 import { t } from "@/locale";
 import DemoItem from "../components/item.uvue";
 import { ref } from "vue";
@@ -64,6 +74,19 @@ 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: "提示",
@@ -80,6 +103,8 @@ function toggle(isExpanded: boolean) {
 		}
 	});
 }
-</script>
 
-<style lang="scss" scoped></style>
+onReady(() => {
+	getContent();
+});
+</script>