添加查看更多组件

pages/demo/data/read-more.uvue

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

pages/index/home.uvue

@@ -48,7 +48,7 @@
 			<view class="group" v-for="item in data" :key="item.label">
 				<cl-text :pt="{ className: '!text-sm !text-surface-400 mb-2 ml-2' }">{{
 					item.label
-				}}</cl-text>
+				}}（{{ item.children?.length ?? 0 }}）</cl-text>
 
 				<view class="list">
 					<cl-row :gutter="10">
@@ -275,6 +275,11 @@ const data = computed<Item[]>(() => {
 					icon: "account-circle-line",
 					path: "/pages/demo/data/avatar"
 				},
+				{
+					label: t("查看更多"),
+					icon: "menu-add-line",
+					path: "/pages/demo/data/read-more"
+				},
 				{
 					label: t("列表"),
 					icon: "list-check",