版本发布
This commit is contained in:
icssoa
80
pages/demo/status/badge.uvue
Normal file
80
pages/demo/status/badge.uvue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<view class="flex flex-row">
|
||||
<cl-badge type="primary" value="1" class="mr-2"></cl-badge>
|
||||
<cl-badge type="success" value="12" class="mr-2"></cl-badge>
|
||||
<cl-badge type="warn" value="31" class="mr-2"></cl-badge>
|
||||
<cl-badge type="error" value="24" class="mr-2"></cl-badge>
|
||||
<cl-badge type="info" value="17" class="mr-2"></cl-badge>
|
||||
<cl-badge type="primary" value="41" class="mr-2"></cl-badge>
|
||||
<cl-badge type="success" value="56" class="mr-2"></cl-badge>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合按钮')">
|
||||
<view class="flex flex-row pt-2">
|
||||
<cl-button>
|
||||
{{ t("购买") }}
|
||||
<template #content>
|
||||
<cl-badge type="error" value="1" position> </cl-badge>
|
||||
</template>
|
||||
</cl-button>
|
||||
|
||||
<cl-button :pt="{ className: '!ml-5' }">
|
||||
{{ t("消息") }}
|
||||
<template #content>
|
||||
<cl-badge type="error" dot position> </cl-badge>
|
||||
</template>
|
||||
</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合图片')">
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<cl-image
|
||||
:pt="{
|
||||
className: 'overflow-visible'
|
||||
}"
|
||||
src="https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png"
|
||||
>
|
||||
<cl-badge type="error" value="+9" position> </cl-badge>
|
||||
</cl-image>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合图标')">
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<view class="relative overflow-visible">
|
||||
<cl-icon name="mail-line"> </cl-icon>
|
||||
<cl-badge
|
||||
type="error"
|
||||
dot
|
||||
position
|
||||
:pt="{
|
||||
className: '!top-[-6rpx] !right-[-6rpx]'
|
||||
}"
|
||||
>
|
||||
</cl-badge>
|
||||
</view>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义样式')">
|
||||
<view class="flex flex-row">
|
||||
<cl-badge
|
||||
type="info"
|
||||
:pt="{ className: '!rounded-bl-none' }"
|
||||
value="1"
|
||||
></cl-badge>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
72
pages/demo/status/countdown.uvue
Normal file
72
pages/demo/status/countdown.uvue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-countdown :datetime="datetime"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('隐藏为 00 的值')">
|
||||
<cl-countdown :minute="60" hide-zero></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('指定天数')">
|
||||
<cl-countdown :day="2" format="{d}天{h}:{m}:{s}"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义模板')">
|
||||
<cl-countdown :day="1" format="{d}天{h}时{m}分{s}秒"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('指定小时')">
|
||||
<cl-countdown :hour="2"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('指定分钟')">
|
||||
<cl-countdown :minute="2"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('指定秒')">
|
||||
<cl-countdown :second="10"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('完成后提示')">
|
||||
<cl-countdown :second="5" @done="onDone"></cl-countdown>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义样式')">
|
||||
<cl-countdown
|
||||
:hour="10"
|
||||
:pt="{
|
||||
text: {
|
||||
className: parseClass([
|
||||
'px-2 py-1 rounded-md',
|
||||
[isDark, 'bg-surface-700', 'bg-surface-100']
|
||||
])
|
||||
},
|
||||
splitor: {
|
||||
className: 'px-2'
|
||||
}
|
||||
}"
|
||||
></cl-countdown>
|
||||
</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 { dayUts, isDark, parseClass } from "@/cool";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const datetime = ref(dayUts().add(1, "minute").toDate());
|
||||
|
||||
function onDone() {
|
||||
ui.showToast({
|
||||
message: "倒计时完成"
|
||||
});
|
||||
}
|
||||
</script>
|
||||
29
pages/demo/status/loadmore.uvue
Normal file
29
pages/demo/status/loadmore.uvue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-loadmore loading></cl-loadmore>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('3秒后加载完成')">
|
||||
<cl-loadmore :loading="loading" :finish="finish"></cl-loadmore>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const loading = ref(true);
|
||||
const finish = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
finish.value = true;
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
46
pages/demo/status/noticebar.uvue
Normal file
46
pages/demo/status/noticebar.uvue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-noticebar
|
||||
text="云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。"
|
||||
></cl-noticebar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带图标')">
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-icon name="notification-4-line" class="mr-2"></cl-icon>
|
||||
<cl-noticebar
|
||||
text="云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。"
|
||||
></cl-noticebar>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('设置速度')">
|
||||
<cl-noticebar
|
||||
:speed="40"
|
||||
text="云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。"
|
||||
></cl-noticebar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('垂直方向')">
|
||||
<cl-noticebar
|
||||
direction="vertical"
|
||||
:text="[
|
||||
'江南可采莲，莲叶何田田',
|
||||
'鱼戏莲叶间',
|
||||
'鱼戏莲叶东',
|
||||
'鱼戏莲叶西',
|
||||
'鱼戏莲叶南',
|
||||
'鱼戏莲叶北'
|
||||
]"
|
||||
></cl-noticebar>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
26
pages/demo/status/progress.uvue
Normal file
26
pages/demo/status/progress.uvue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-progress :value="50"></cl-progress>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义颜色')">
|
||||
<cl-progress :value="30" color="red" un-color="#f7bfbf"></cl-progress>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义宽度')">
|
||||
<cl-progress :value="30" :stroke-width="20"></cl-progress>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('显示文本')">
|
||||
<cl-progress :value="75" show-text></cl-progress>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
77
pages/demo/status/rolling-number.uvue
Normal file
77
pages/demo/status/rolling-number.uvue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-rolling-number :value="value"></cl-rolling-number>
|
||||
|
||||
<view class="flex flex-row mt-2">
|
||||
<cl-button icon="add-line" size="small" @tap="add"></cl-button>
|
||||
<cl-button
|
||||
icon="subtract-line"
|
||||
type="light"
|
||||
size="small"
|
||||
@tap="sub"
|
||||
></cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="flex flex-col items-center">
|
||||
<cl-rolling-number
|
||||
:value="value"
|
||||
:pt="{
|
||||
className: parseClass([[isCustom, '!text-3xl']]),
|
||||
color: isCustom ? 'primary' : ''
|
||||
}"
|
||||
:duration="isSpeed ? 300 : 1000"
|
||||
:decimals="isDecimals ? 2 : 0"
|
||||
></cl-rolling-number>
|
||||
|
||||
<view class="flex flex-row mt-2">
|
||||
<cl-button icon="add-line" size="small" @tap="add"></cl-button>
|
||||
<cl-button
|
||||
icon="subtract-line"
|
||||
type="light"
|
||||
size="small"
|
||||
@tap="sub"
|
||||
></cl-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-list border class="mt-3">
|
||||
<cl-list-item :label="t('加快滚动速度')">
|
||||
<cl-switch v-model="isSpeed"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示小数位数')">
|
||||
<cl-switch v-model="isDecimals"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('自定义样式')">
|
||||
<cl-switch v-model="isCustom"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</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 { parseClass } from "@/cool";
|
||||
|
||||
const value = ref(100);
|
||||
const isSpeed = ref(false);
|
||||
const isDecimals = ref(false);
|
||||
const isCustom = ref(false);
|
||||
|
||||
function add() {
|
||||
value.value += 100;
|
||||
}
|
||||
|
||||
function sub() {
|
||||
value.value -= 100;
|
||||
}
|
||||
</script>
|
||||
61
pages/demo/status/skeleton.uvue
Normal file
61
pages/demo/status/skeleton.uvue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('文本')">
|
||||
<cl-skeleton :loading="loading">
|
||||
<cl-text>云想衣裳花想容，春风拂槛露华浓。</cl-text>
|
||||
</cl-skeleton>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('按钮')">
|
||||
<view class="flex flex-row">
|
||||
<cl-skeleton type="button" :loading="loading">
|
||||
<cl-button>立即购买</cl-button>
|
||||
</cl-skeleton>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('图片')">
|
||||
<cl-skeleton type="image" :loading="loading">
|
||||
<cl-image
|
||||
src="https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png"
|
||||
></cl-image>
|
||||
</cl-skeleton>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('圆形')">
|
||||
<cl-skeleton type="circle" :loading="loading">
|
||||
<cl-image
|
||||
:radius="100"
|
||||
src="https://uni-docs.cool-js.com/demo/pages/demo/static/bg1.png"
|
||||
></cl-image>
|
||||
</cl-skeleton>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('组合')">
|
||||
<view class="flex flex-row">
|
||||
<cl-skeleton type="image" loading> </cl-skeleton>
|
||||
|
||||
<view class="flex-1 ml-2">
|
||||
<cl-skeleton type="text" loading> </cl-skeleton>
|
||||
<cl-skeleton type="text" loading class="mt-2 !w-[160rpx]"> </cl-skeleton>
|
||||
</view>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const loading = ref(true);
|
||||
|
||||
onReady(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user