111 lines
3.3 KiB
Plaintext
111 lines
3.3 KiB
Plaintext
<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>
|