86 lines
2.4 KiB
Plaintext
86 lines
2.4 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 :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>
|