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>
|