小程序初始提交
This commit is contained in:
133
cool-unix/pages/demo/basic/button.uvue
Normal file
133
cool-unix/pages/demo/basic/button.uvue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-button>{{ t("普通") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同类型')">
|
||||
<view class="flex flex-row flex-wrap mb-2 overflow-visible">
|
||||
<cl-button type="primary">{{ t("主要") }}</cl-button>
|
||||
<cl-button type="success">{{ t("成功") }}</cl-button>
|
||||
<cl-button type="warn">{{ t("警告") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-row mb-2 overflow-visible">
|
||||
<cl-button type="error">{{ t("危险") }}</cl-button>
|
||||
<cl-button type="info">{{ t("信息") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<cl-button type="light">{{ t("浅色") }}</cl-button>
|
||||
<cl-button type="dark">{{ t("深色") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('只显示图标')">
|
||||
<view class="flex flex-row">
|
||||
<cl-button type="primary" icon="send-plane-fill"></cl-button>
|
||||
<cl-button type="error" icon="verified-badge-fill"></cl-button>
|
||||
<cl-button type="info" icon="edit-fill"></cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="flex flex-row justify-center mb-5 h-14 items-center">
|
||||
<cl-button
|
||||
:type="type"
|
||||
:size="size"
|
||||
:text="isText"
|
||||
:border="isBorder"
|
||||
:rounded="isRounded"
|
||||
:loading="isLoading"
|
||||
:disabled="isDisabled"
|
||||
:icon="isIcon ? 'send-plane-fill' : ''"
|
||||
:color="isColor ? '#4286e0' : ''"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
{
|
||||
'!bg-transparent': isColor
|
||||
}
|
||||
])
|
||||
}"
|
||||
>{{ t("自定义") }}</cl-button
|
||||
>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<view class="p-2">
|
||||
<cl-tabs
|
||||
v-model="size"
|
||||
:height="66"
|
||||
:list="sizeOptions"
|
||||
show-slider
|
||||
fill
|
||||
></cl-tabs>
|
||||
</view>
|
||||
|
||||
<cl-list-item :label="t('文本模式')">
|
||||
<cl-switch v-model="isText"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('带边框')">
|
||||
<cl-switch v-model="isBorder"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('圆角按钮')">
|
||||
<cl-switch v-model="isRounded"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('带左侧图标')">
|
||||
<cl-switch v-model="isIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('加载中')">
|
||||
<cl-switch v-model="isLoading"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('自定义颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import type { ClButtonType, ClTabsItem, Size } from "@/uni_modules/cool-ui";
|
||||
import { parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const type = ref<ClButtonType>("primary");
|
||||
|
||||
const isText = ref(false);
|
||||
const isBorder = ref(false);
|
||||
const isRounded = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isIcon = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isColor = ref(false);
|
||||
|
||||
const size = ref<Size>("normal");
|
||||
const sizeOptions = ref<ClTabsItem[]>([
|
||||
{
|
||||
label: t("小"),
|
||||
value: "small"
|
||||
},
|
||||
{
|
||||
label: t("默认"),
|
||||
value: "normal"
|
||||
},
|
||||
{
|
||||
label: t("大"),
|
||||
value: "large"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
94
cool-unix/pages/demo/basic/icon.uvue
Normal file
94
cool-unix/pages/demo/basic/icon.uvue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('设置颜色')">
|
||||
<view class="flex flex-row">
|
||||
<cl-icon name="heart-fill" color="primary" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="success" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="error" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="warn" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="info" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="#428bca" class="mr-2"></cl-icon>
|
||||
<cl-icon name="heart-fill" color="purple"></cl-icon>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('设置大小')">
|
||||
<view class="flex flex-row">
|
||||
<cl-icon name="heart-fill" class="mr-2" :size="50"></cl-icon>
|
||||
<cl-icon name="heart-fill" class="mr-2" :size="40"></cl-icon>
|
||||
<cl-icon name="heart-fill" class="mr-2" :size="30"></cl-icon>
|
||||
<cl-icon name="heart-fill" class="mr-2" :size="20"></cl-icon>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item>
|
||||
<cl-text>{{ t("集成 iconfont 与 remixicon 图标库，展示部分示例") }}</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('iconfont')">
|
||||
<cl-row :gutter="10">
|
||||
<cl-col :span="4" v-for="item in iconfont" :key="item">
|
||||
<view
|
||||
class="flex flex-col items-center justify-center h-[100rpx] rounded-lg"
|
||||
hover-class="opacity-60"
|
||||
:hover-stay-time="250"
|
||||
@tap="copy(item)"
|
||||
>
|
||||
<cl-icon :name="item"></cl-icon>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('remixicon')">
|
||||
<cl-row :gutter="10">
|
||||
<cl-col :span="4" v-for="item in remixicon" :key="item">
|
||||
<view
|
||||
class="flex flex-col items-center justify-center h-[100rpx]"
|
||||
hover-class="opacity-60"
|
||||
:hover-stay-time="250"
|
||||
@tap="copy(item)"
|
||||
>
|
||||
<cl-icon :name="item"></cl-icon>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { icons } from "@/icons";
|
||||
import { forInObject, keys } from "@/cool";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const remixicon = ref<string[]>([]);
|
||||
const iconfont = ref<string[]>([]);
|
||||
|
||||
forInObject(icons, (value, key) => {
|
||||
if (key == "iconfont") {
|
||||
iconfont.value = keys(value).slice(0, 100);
|
||||
} else {
|
||||
remixicon.value = keys(value).slice(0, 100);
|
||||
}
|
||||
});
|
||||
|
||||
function copy(data: string) {
|
||||
uni.setClipboardData({
|
||||
data,
|
||||
showToast: false,
|
||||
success() {
|
||||
ui.showToast({
|
||||
message: t("复制成功")
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
116
cool-unix/pages/demo/basic/image.uvue
Normal file
116
cool-unix/pages/demo/basic/image.uvue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-image :src="url"></cl-image>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同裁剪')">
|
||||
<view class="flex flex-row justify-between">
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<cl-image :src="url" mode="aspectFill"></cl-image>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm mt-1'
|
||||
}"
|
||||
>aspectFill</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<cl-image :src="url" mode="aspectFit"></cl-image>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm mt-1'
|
||||
}"
|
||||
>aspectFit</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<cl-image :src="url" mode="heightFix"></cl-image>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm mt-1'
|
||||
}"
|
||||
>heightFix</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-col items-center justify-center">
|
||||
<cl-image :src="url" mode="scaleToFill"></cl-image>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm mt-1'
|
||||
}"
|
||||
>scaleToFill</cl-text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('点击可预览')">
|
||||
<cl-image :src="url" preview></cl-image>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('失败时显示')">
|
||||
<cl-image src="url"></cl-image>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('加载中')">
|
||||
<cl-image src=""></cl-image>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义圆角')">
|
||||
<view class="flex flex-row">
|
||||
<cl-image
|
||||
:src="url"
|
||||
:pt="{
|
||||
inner: {
|
||||
className: '!rounded-none'
|
||||
}
|
||||
}"
|
||||
></cl-image>
|
||||
|
||||
<cl-image
|
||||
:src="url"
|
||||
:pt="{
|
||||
className: 'ml-3',
|
||||
inner: {
|
||||
className: '!rounded-2xl'
|
||||
}
|
||||
}"
|
||||
></cl-image>
|
||||
|
||||
<cl-image
|
||||
:src="url"
|
||||
:pt="{
|
||||
className: 'ml-3',
|
||||
inner: {
|
||||
className: '!rounded-3xl'
|
||||
}
|
||||
}"
|
||||
></cl-image>
|
||||
|
||||
<cl-image
|
||||
:src="url"
|
||||
:pt="{
|
||||
className: 'ml-3',
|
||||
inner: {
|
||||
className: '!rounded-full'
|
||||
}
|
||||
}"
|
||||
></cl-image>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const url = ref("https://unix.cool-js.com/images/demo/avatar.jpg");
|
||||
</script>
|
||||
72
cool-unix/pages/demo/basic/tag.uvue
Normal file
72
cool-unix/pages/demo/basic/tag.uvue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<view class="flex flex-row">
|
||||
<cl-tag>{{ t("标签") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同类型')">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-tag type="primary">{{ t("主要") }}</cl-tag>
|
||||
<cl-tag type="success">{{ t("成功") }}</cl-tag>
|
||||
<cl-tag type="warn">{{ t("警告") }}</cl-tag>
|
||||
<cl-tag type="error">{{ t("危险") }}</cl-tag>
|
||||
<cl-tag type="info">{{ t("信息") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带图标')">
|
||||
<view class="flex flex-row">
|
||||
<cl-tag icon="mail-line">{{ t("邮件") }}</cl-tag>
|
||||
<cl-tag icon="calendar-line">{{ t("日历") }}</cl-tag>
|
||||
<cl-tag icon="file-line">{{ t("文件") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('圆角')">
|
||||
<view class="flex flex-row">
|
||||
<cl-tag rounded>{{ t("圆角") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('可关闭')">
|
||||
<view class="flex flex-row">
|
||||
<cl-tag closable>{{ t("可关闭") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('镂空')">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-tag type="primary" plain>{{ t("主要") }}</cl-tag>
|
||||
<cl-tag type="success" plain>{{ t("成功") }}</cl-tag>
|
||||
<cl-tag type="warn" plain>{{ t("警告") }}</cl-tag>
|
||||
<cl-tag type="error" plain>{{ t("危险") }}</cl-tag>
|
||||
<cl-tag type="info" plain>{{ t("信息") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="flex flex-row">
|
||||
<cl-tag
|
||||
:pt="{
|
||||
className: '!bg-sky-200',
|
||||
text: {
|
||||
className: '!text-sky-700'
|
||||
}
|
||||
}"
|
||||
>{{ t("自定义颜色") }}</cl-tag
|
||||
>
|
||||
|
||||
<cl-tag :pt="{ className: '!rounded-none' }">{{ t("自定义无圆角") }}</cl-tag>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
</script>
|
||||
103
cool-unix/pages/demo/basic/text.uvue
Normal file
103
cool-unix/pages/demo/basic/text.uvue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-text>云想衣裳花想容，春风拂槛露华浓。</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义颜色')">
|
||||
<cl-text color="primary">明月松间照，清泉石上流。</cl-text>
|
||||
<cl-text color="error">举头望明月，低头思故乡。</cl-text>
|
||||
<cl-text color="success">春眠不觉晓，处处闻啼鸟。</cl-text>
|
||||
<cl-text color="warn">劝君更尽一杯酒，西出阳关无故人。</cl-text>
|
||||
<cl-text color="info">孤帆远影碧空尽，唯见长江天际流。</cl-text>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sky-500'
|
||||
}"
|
||||
>大漠孤烟直，长河落日圆。</cl-text
|
||||
>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('省略号')">
|
||||
<cl-text ellipsis
|
||||
>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。</cl-text
|
||||
>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多行省略号')">
|
||||
<cl-text ellipsis :lines="2"
|
||||
>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。天阶夜色凉如水，卧看牵牛织女星。人生若只如初见，何事秋风悲画扇。山有木兮木有枝，心悦君兮君不知。</cl-text
|
||||
>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('字体大小')">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-xs'
|
||||
}"
|
||||
>text-xs</cl-text
|
||||
>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm'
|
||||
}"
|
||||
>text-sm</cl-text
|
||||
>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-md'
|
||||
}"
|
||||
>text-md</cl-text
|
||||
>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-lg'
|
||||
}"
|
||||
>text-lg</cl-text
|
||||
>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-xl'
|
||||
}"
|
||||
>text-xl</cl-text
|
||||
>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义尺寸')">
|
||||
<cl-text :size="20">20rpx</cl-text>
|
||||
<cl-text size="30rpx">30rpx</cl-text>
|
||||
<cl-text size="15px">15px</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('金额')">
|
||||
<cl-text type="amount" :value="10000000.0"></cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('手机号脱敏')">
|
||||
<cl-text type="phone" mask value="13800138000"></cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('姓名脱敏')">
|
||||
<cl-text type="name" mask value="张三"></cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('邮箱脱敏')">
|
||||
<cl-text type="email" mask value="example@example.com"></cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('银行卡脱敏')">
|
||||
<cl-text type="card" mask value="1234 5678 9012 3456"></cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义脱敏字符')">
|
||||
<cl-text type="phone" value="13800138000" mask mask-char="~"></cl-text>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
32
cool-unix/pages/demo/components/goods-item.uvue
Normal file
32
cool-unix/pages/demo/components/goods-item.uvue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<view class="p-3 pb-0">
|
||||
<view class="w-full p-3 bg-white rounded-xl dark:bg-surface-800">
|
||||
<cl-image :src="item?.image" mode="aspectFill" width="100%" height="280rpx"></cl-image>
|
||||
<cl-text :pt="{ className: 'mt-2' }">{{ item?.title }}</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import { parse } from "@/cool";
|
||||
|
||||
defineOptions({
|
||||
name: "goods-item"
|
||||
});
|
||||
|
||||
type GoodsItem = {
|
||||
id: number;
|
||||
title: string;
|
||||
image: string;
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
});
|
||||
|
||||
const item = computed(() => parse<GoodsItem>(props.value));
|
||||
</script>
|
||||
28
cool-unix/pages/demo/components/item.uvue
Normal file
28
cool-unix/pages/demo/components/item.uvue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<view class="demo-item dark:!bg-surface-800">
|
||||
<cl-text :pt="{ className: 'text-sm text-surface-400 mb-2' }" v-if="label != ''">{{
|
||||
label
|
||||
}}</cl-text>
|
||||
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineOptions({
|
||||
name: "demo-item"
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-item {
|
||||
@apply p-3 rounded-xl bg-white mb-3;
|
||||
}
|
||||
</style>
|
||||
17
cool-unix/pages/demo/components/tips.uvue
Normal file
17
cool-unix/pages/demo/components/tips.uvue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<view class="bg-surface-100 dark:!bg-surface-700 rounded-lg p-3 mb-3">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm'
|
||||
}"
|
||||
>
|
||||
<slot></slot>
|
||||
</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "demo-tips"
|
||||
});
|
||||
</script>
|
||||
32
cool-unix/pages/demo/data/avatar.uvue
Normal file
32
cool-unix/pages/demo/data/avatar.uvue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-avatar src="https://unix.cool-js.com/images/demo/avatar.jpg"></cl-avatar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('无图片')">
|
||||
<cl-avatar></cl-avatar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('圆角')">
|
||||
<cl-avatar
|
||||
rounded
|
||||
src="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||
></cl-avatar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义大小')">
|
||||
<cl-avatar
|
||||
:size="120"
|
||||
src="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||
></cl-avatar>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
59
cool-unix/pages/demo/data/banner.uvue
Normal file
59
cool-unix/pages/demo/data/banner.uvue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-banner :list="list"></cl-banner>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('禁用手势')">
|
||||
<cl-banner :list="list" :disable-touch="true"></cl-banner>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义样式')">
|
||||
<cl-banner
|
||||
:list="list"
|
||||
:pt="{
|
||||
className: 'mx-[-12rpx] !rounded-none',
|
||||
item: {
|
||||
className: parseClass(['scale-y-80 !px-[12rpx]'])
|
||||
},
|
||||
itemActive: {
|
||||
className: parseClass(['!scale-y-100'])
|
||||
},
|
||||
image: {
|
||||
className: '!rounded-none'
|
||||
}
|
||||
}"
|
||||
:previous-margin="40"
|
||||
:next-margin="40"
|
||||
></cl-banner>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义样式2')">
|
||||
<cl-banner
|
||||
:list="list"
|
||||
:pt="{
|
||||
className: 'mx-[-12rpx]',
|
||||
item: {
|
||||
className: parseClass(['px-[12rpx]'])
|
||||
}
|
||||
}"
|
||||
:next-margin="40"
|
||||
></cl-banner>
|
||||
</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 list = ref<string[]>([
|
||||
"https://unix.cool-js.com/images/demo/bg1.png",
|
||||
"https://unix.cool-js.com/images/demo/bg2.png",
|
||||
"https://unix.cool-js.com/images/demo/bg3.png"
|
||||
]);
|
||||
</script>
|
||||
217
cool-unix/pages/demo/data/draggable.uvue
Normal file
217
cool-unix/pages/demo/data/draggable.uvue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item>
|
||||
<cl-text color="info">
|
||||
{{ t("长按项即可拖动排序") }}
|
||||
</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('单列排序')">
|
||||
<cl-draggable v-model="list">
|
||||
<template #item="{ item, index }">
|
||||
<view
|
||||
class="flex flex-row items-center p-3 bg-surface-100 rounded-lg mb-2 dark:!bg-surface-700"
|
||||
:class="{
|
||||
'opacity-50': item['disabled']
|
||||
}"
|
||||
>
|
||||
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不需要长按')">
|
||||
<cl-draggable v-model="list5" :long-press="false">
|
||||
<template #item="{ item }">
|
||||
<view
|
||||
class="flex flex-row items-center p-3 bg-surface-100 rounded-lg mb-2 dark:!bg-surface-700"
|
||||
>
|
||||
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合列表使用')">
|
||||
<cl-list border>
|
||||
<cl-draggable v-model="list2">
|
||||
<template #item="{ item, index, dragging, dragIndex }">
|
||||
<cl-list-item
|
||||
icon="chat-thread-line"
|
||||
:label="(item as UTSJSONObject).label"
|
||||
arrow
|
||||
:pt="{
|
||||
inner: {
|
||||
className: parseClass([
|
||||
[
|
||||
dragging && dragIndex == index,
|
||||
isDark ? '!bg-surface-700' : '!bg-surface-100'
|
||||
]
|
||||
])
|
||||
}
|
||||
}"
|
||||
></cl-list-item>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多列排序')">
|
||||
<cl-draggable v-model="list3" :columns="4">
|
||||
<template #item="{ item, index }">
|
||||
<view
|
||||
class="flex flex-row items-center justify-center p-3 bg-surface-100 rounded-lg m-1 dark:!bg-surface-700"
|
||||
:class="{
|
||||
'opacity-50': item['disabled']
|
||||
}"
|
||||
>
|
||||
<cl-text>{{ (item as UTSJSONObject).label }}</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('结合图片使用')">
|
||||
<cl-draggable v-model="list4" :columns="4">
|
||||
<template #item="{ item, index }">
|
||||
<view class="p-[2px]">
|
||||
<cl-image
|
||||
:src="(item as UTSJSONObject).url"
|
||||
mode="widthFix"
|
||||
:pt="{
|
||||
className: '!w-full'
|
||||
}"
|
||||
preview
|
||||
></cl-image>
|
||||
</view>
|
||||
</template>
|
||||
</cl-draggable>
|
||||
</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 { isDark, parseClass } from "@/cool";
|
||||
|
||||
// list：李白《将进酒》
|
||||
const list = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "君不见黄河之水天上来"
|
||||
},
|
||||
{
|
||||
label: "奔流到海不复回",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "君不见高堂明镜悲白发"
|
||||
},
|
||||
{
|
||||
label: "朝如青丝暮成雪"
|
||||
},
|
||||
{
|
||||
label: "人生得意须尽欢"
|
||||
}
|
||||
]);
|
||||
|
||||
// list5：杜甫《春望》
|
||||
const list5 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "国破山河在"
|
||||
},
|
||||
{
|
||||
label: "城春草木深"
|
||||
},
|
||||
{
|
||||
label: "感时花溅泪"
|
||||
}
|
||||
]);
|
||||
|
||||
// list2：王之涣《登鹳雀楼》
|
||||
const list2 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "白日依山尽"
|
||||
},
|
||||
{
|
||||
label: "黄河入海流"
|
||||
},
|
||||
{
|
||||
label: "欲穷千里目"
|
||||
},
|
||||
{
|
||||
label: "更上一层楼"
|
||||
},
|
||||
{
|
||||
label: "一览众山小"
|
||||
}
|
||||
]);
|
||||
|
||||
const list3 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
label: "项目1"
|
||||
},
|
||||
{
|
||||
label: "项目2"
|
||||
},
|
||||
{
|
||||
label: "项目3"
|
||||
},
|
||||
{
|
||||
label: "项目4"
|
||||
},
|
||||
{
|
||||
label: "项目5"
|
||||
},
|
||||
{
|
||||
label: "项目6"
|
||||
},
|
||||
{
|
||||
label: "项目7"
|
||||
},
|
||||
{
|
||||
label: "项目8",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "项目9"
|
||||
},
|
||||
{
|
||||
label: "项目10"
|
||||
},
|
||||
{
|
||||
label: "项目11"
|
||||
},
|
||||
{
|
||||
label: "项目12"
|
||||
}
|
||||
]);
|
||||
|
||||
const list4 = ref<UTSJSONObject[]>([
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/1.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/2.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/3.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/4.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/5.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/6.jpg"
|
||||
},
|
||||
{
|
||||
url: "https://unix.cool-js.com/images/demo/7.jpg"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
467
cool-unix/pages/demo/data/filter-bar.uvue
Normal file
467
cool-unix/pages/demo/data/filter-bar.uvue
Normal file
@@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-filter-bar>
|
||||
<!-- 下拉框 -->
|
||||
<cl-filter-item
|
||||
label="综合排序"
|
||||
type="select"
|
||||
:value="1"
|
||||
:options="coreOptions"
|
||||
:pt="{
|
||||
className: 'w-[220rpx] !flex-none'
|
||||
}"
|
||||
@change="onOptionsChange"
|
||||
></cl-filter-item>
|
||||
|
||||
<!-- 排序 -->
|
||||
<cl-filter-item
|
||||
label="销量"
|
||||
type="sort"
|
||||
value="desc"
|
||||
@change="onSortChange"
|
||||
></cl-filter-item>
|
||||
|
||||
<!-- 开关 -->
|
||||
<cl-filter-item
|
||||
label="国补"
|
||||
type="switch"
|
||||
:value="false"
|
||||
@change="onSwitchChange"
|
||||
></cl-filter-item>
|
||||
|
||||
<!-- 自定义 -->
|
||||
<view
|
||||
class="flex flex-row items-center justify-center flex-1"
|
||||
@tap="openFilter"
|
||||
>
|
||||
<cl-text>筛选</cl-text>
|
||||
<cl-icon name="filter-line"></cl-icon>
|
||||
</view>
|
||||
</cl-filter-bar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item>
|
||||
<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
|
||||
JSON.stringify(filterForm, null, 4)
|
||||
}}</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item>
|
||||
<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
|
||||
JSON.stringify(searchForm, null, 4)
|
||||
}}</cl-text>
|
||||
</demo-item>
|
||||
</view>
|
||||
|
||||
<!-- 自定义筛选 -->
|
||||
<cl-popup
|
||||
v-model="filterVisible"
|
||||
:title="t('筛选')"
|
||||
direction="right"
|
||||
size="80%"
|
||||
:show-header="false"
|
||||
>
|
||||
<view class="flex flex-col h-full">
|
||||
<scroll-view class="flex-1">
|
||||
<cl-form :pt="{ className: 'p-3' }">
|
||||
<cl-form-item label="服务/折扣">
|
||||
<cl-row :gutter="20">
|
||||
<cl-col :span="8" v-for="(item, index) in disOptions" :key="index">
|
||||
<cl-checkbox
|
||||
v-model="searchForm.dis"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:show-icon="false"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mb-3 p-2 rounded-lg justify-center border border-solid border-transparent',
|
||||
[isDark, 'bg-surface-800', 'bg-surface-100'],
|
||||
[
|
||||
searchForm.dis.includes(item.value),
|
||||
`${isDark ? '!bg-surface-700' : '!bg-white'} !border-primary-500`
|
||||
]
|
||||
]),
|
||||
label: {
|
||||
className: 'text-sm'
|
||||
}
|
||||
}"
|
||||
></cl-checkbox>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item label="价格区间">
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-input
|
||||
v-model="searchForm.minPrice"
|
||||
type="digit"
|
||||
placeholder="最低价"
|
||||
:pt="{
|
||||
className: 'flex-1',
|
||||
inner: {
|
||||
className: 'text-center'
|
||||
}
|
||||
}"
|
||||
></cl-input>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'px-2'
|
||||
}"
|
||||
>~</cl-text
|
||||
>
|
||||
<cl-input
|
||||
v-model="searchForm.maxPrice"
|
||||
type="digit"
|
||||
placeholder="最高价"
|
||||
:pt="{
|
||||
className: 'flex-1',
|
||||
inner: {
|
||||
className: 'text-center'
|
||||
}
|
||||
}"
|
||||
></cl-input>
|
||||
</view>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item label="品牌">
|
||||
<cl-row :gutter="20">
|
||||
<cl-col
|
||||
:span="8"
|
||||
v-for="(item, index) in brandOptions"
|
||||
:key="index"
|
||||
>
|
||||
<cl-checkbox
|
||||
v-model="searchForm.brand"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:show-icon="false"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mb-3 p-2 rounded-lg justify-center border border-solid border-transparent',
|
||||
[isDark, 'bg-surface-800', 'bg-surface-100'],
|
||||
[
|
||||
searchForm.brand.includes(item.value),
|
||||
`${isDark ? '!bg-surface-700' : '!bg-white'} !border-primary-500`
|
||||
]
|
||||
]),
|
||||
label: {
|
||||
className: 'text-sm'
|
||||
}
|
||||
}"
|
||||
></cl-checkbox>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item label="内存">
|
||||
<cl-row :gutter="20">
|
||||
<cl-col
|
||||
:span="8"
|
||||
v-for="(item, index) in memoryOptions"
|
||||
:key="index"
|
||||
>
|
||||
<cl-radio
|
||||
v-model="searchForm.memory"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:show-icon="false"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mb-3 p-2 rounded-lg justify-center border border-solid border-transparent',
|
||||
[isDark, 'bg-surface-800', 'bg-surface-100'],
|
||||
[
|
||||
searchForm.memory == item.value,
|
||||
`${isDark ? '!bg-surface-700' : '!bg-white'} !border-primary-500`
|
||||
]
|
||||
]),
|
||||
label: {
|
||||
className: 'text-sm'
|
||||
}
|
||||
}"
|
||||
></cl-radio>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item label="颜色">
|
||||
<cl-row :gutter="20">
|
||||
<cl-col
|
||||
:span="8"
|
||||
v-for="(item, index) in colorOptions"
|
||||
:key="index"
|
||||
>
|
||||
<cl-radio
|
||||
v-model="searchForm.color"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
:show-icon="false"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mb-3 p-2 rounded-lg justify-center border border-solid border-transparent',
|
||||
[isDark, 'bg-surface-800', 'bg-surface-100'],
|
||||
[
|
||||
searchForm.color == item.value,
|
||||
`${isDark ? '!bg-surface-700' : '!bg-white'} !border-primary-500`
|
||||
]
|
||||
]),
|
||||
label: {
|
||||
className: 'text-sm'
|
||||
}
|
||||
}"
|
||||
></cl-radio>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</cl-form-item>
|
||||
</cl-form>
|
||||
</scroll-view>
|
||||
|
||||
<view class="flex flex-row p-3">
|
||||
<cl-button
|
||||
type="info"
|
||||
text
|
||||
border
|
||||
:pt="{
|
||||
className: 'flex-1'
|
||||
}"
|
||||
@tap="closeFilter"
|
||||
>{{ t("取消") }}</cl-button
|
||||
>
|
||||
<cl-button
|
||||
:pt="{
|
||||
className: 'flex-1'
|
||||
}"
|
||||
@tap="submit"
|
||||
>{{ t("确定") }}</cl-button
|
||||
>
|
||||
</view>
|
||||
|
||||
<cl-safe-area type="bottom"></cl-safe-area>
|
||||
</view>
|
||||
</cl-popup>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { reactive, ref } from "vue";
|
||||
import { useUi, type ClSelectOption } from "@/uni_modules/cool-ui";
|
||||
import { isDark, parseClass } from "@/cool";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const filterVisible = ref(false);
|
||||
|
||||
function openFilter() {
|
||||
filterVisible.value = true;
|
||||
}
|
||||
|
||||
function closeFilter() {
|
||||
filterVisible.value = false;
|
||||
}
|
||||
|
||||
function submit() {
|
||||
closeFilter();
|
||||
|
||||
ui.showLoading();
|
||||
|
||||
setTimeout(() => {
|
||||
ui.hideLoading();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
const coreOptions = ref<ClSelectOption[]>([
|
||||
{
|
||||
label: "综合排序",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "价格从高到底",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "价格从低到高",
|
||||
value: 3
|
||||
}
|
||||
]);
|
||||
|
||||
type Option = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
|
||||
const disOptions = ref<Option[]>([
|
||||
{
|
||||
label: "百亿补贴",
|
||||
value: "billion_subsidy"
|
||||
},
|
||||
{
|
||||
label: "以旧换新",
|
||||
value: "trade_in"
|
||||
},
|
||||
{
|
||||
label: "分期免息",
|
||||
value: "installment"
|
||||
},
|
||||
{
|
||||
label: "包邮",
|
||||
value: "free_shipping"
|
||||
},
|
||||
{
|
||||
label: "促销",
|
||||
value: "promotion"
|
||||
},
|
||||
{
|
||||
label: "价保",
|
||||
value: "price_protection"
|
||||
},
|
||||
{
|
||||
label: "仅看有货",
|
||||
value: "in_stock"
|
||||
},
|
||||
{
|
||||
label: "货到付款",
|
||||
value: "cod"
|
||||
}
|
||||
]);
|
||||
|
||||
const brandOptions = ref<Option[]>([
|
||||
{
|
||||
label: "华为",
|
||||
value: "huawei"
|
||||
},
|
||||
{
|
||||
label: "苹果",
|
||||
value: "apple"
|
||||
},
|
||||
{
|
||||
label: "小米",
|
||||
value: "xiaomi"
|
||||
},
|
||||
{
|
||||
label: "三星",
|
||||
value: "samsung"
|
||||
},
|
||||
{
|
||||
label: "OPPO",
|
||||
value: "oppo"
|
||||
},
|
||||
{
|
||||
label: "vivo",
|
||||
value: "vivo"
|
||||
},
|
||||
{
|
||||
label: "荣耀",
|
||||
value: "honor"
|
||||
}
|
||||
]);
|
||||
|
||||
const colorOptions = ref<Option[]>([
|
||||
{
|
||||
label: "红色",
|
||||
value: "red"
|
||||
},
|
||||
{
|
||||
label: "蓝色",
|
||||
value: "blue"
|
||||
},
|
||||
{
|
||||
label: "黑色",
|
||||
value: "black"
|
||||
},
|
||||
{
|
||||
label: "白色",
|
||||
value: "white"
|
||||
},
|
||||
{
|
||||
label: "金色",
|
||||
value: "gold"
|
||||
},
|
||||
{
|
||||
label: "银色",
|
||||
value: "silver"
|
||||
},
|
||||
{
|
||||
label: "绿色",
|
||||
value: "green"
|
||||
},
|
||||
{
|
||||
label: "紫色",
|
||||
value: "purple"
|
||||
},
|
||||
{
|
||||
label: "灰色",
|
||||
value: "gray"
|
||||
},
|
||||
{
|
||||
label: "粉色",
|
||||
value: "pink"
|
||||
}
|
||||
]);
|
||||
|
||||
const memoryOptions = ref<Option[]>([
|
||||
{
|
||||
label: "128GB",
|
||||
value: "128"
|
||||
},
|
||||
{
|
||||
label: "256GB",
|
||||
value: "256"
|
||||
},
|
||||
{
|
||||
label: "512GB",
|
||||
value: "512"
|
||||
},
|
||||
{
|
||||
label: "1TB",
|
||||
value: "1024"
|
||||
}
|
||||
]);
|
||||
|
||||
type SearchForm = {
|
||||
dis: string[];
|
||||
minPrice: string;
|
||||
maxPrice: string;
|
||||
brand: string[];
|
||||
memory: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
const searchForm = ref<SearchForm>({
|
||||
dis: [],
|
||||
minPrice: "50",
|
||||
maxPrice: "300",
|
||||
brand: [],
|
||||
memory: "",
|
||||
color: ""
|
||||
});
|
||||
|
||||
type FilterForm = {
|
||||
core: number;
|
||||
sort: string;
|
||||
switch: boolean;
|
||||
};
|
||||
|
||||
const filterForm = reactive<FilterForm>({
|
||||
core: 0,
|
||||
sort: "none",
|
||||
switch: false
|
||||
});
|
||||
|
||||
function onOptionsChange(val: number) {
|
||||
console.log(val);
|
||||
filterForm.core = val;
|
||||
}
|
||||
|
||||
function onSortChange(val: string) {
|
||||
console.log(val);
|
||||
filterForm.sort = val;
|
||||
}
|
||||
|
||||
function onSwitchChange(val: boolean) {
|
||||
console.log(val);
|
||||
filterForm.switch = val;
|
||||
}
|
||||
</script>
|
||||
118
cool-unix/pages/demo/data/list-view-refresh.uvue
Normal file
118
cool-unix/pages/demo/data/list-view-refresh.uvue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<cl-list-view
|
||||
ref="listViewRef"
|
||||
:data="listView"
|
||||
:virtual="false"
|
||||
:pt="{
|
||||
refresher: {
|
||||
className: 'pt-3'
|
||||
}
|
||||
}"
|
||||
:refresher-enabled="true"
|
||||
@pull="onPull"
|
||||
@bottom="loadMore"
|
||||
>
|
||||
<template #item="{ value }">
|
||||
<goods-item :value="value"></goods-item>
|
||||
</template>
|
||||
|
||||
<template #bottom>
|
||||
<view class="py-3">
|
||||
<cl-loadmore
|
||||
v-if="list.length > 0"
|
||||
:loading="loading"
|
||||
safe-area-bottom
|
||||
></cl-loadmore>
|
||||
</view>
|
||||
</template>
|
||||
</cl-list-view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { ref } from "vue";
|
||||
import { usePager } from "@/cool";
|
||||
import GoodsItem from "../components/goods-item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);
|
||||
|
||||
let id = 0;
|
||||
|
||||
const { refresh, list, listView, loading, loadMore } = usePager((params, { render }) => {
|
||||
// 模拟请求
|
||||
setTimeout(() => {
|
||||
render({
|
||||
list: [
|
||||
{
|
||||
id: id++,
|
||||
title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
|
||||
image: "https://unix.cool-js.com/images/demo/1.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
|
||||
image: "https://unix.cool-js.com/images/demo/2.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
|
||||
image: "https://unix.cool-js.com/images/demo/3.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
|
||||
image: "https://unix.cool-js.com/images/demo/5.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
|
||||
image: "https://unix.cool-js.com/images/demo/6.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
|
||||
image: "https://unix.cool-js.com/images/demo/7.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
|
||||
image: "https://unix.cool-js.com/images/demo/8.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
|
||||
image: "https://unix.cool-js.com/images/demo/9.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
|
||||
image: "https://unix.cool-js.com/images/demo/10.jpg"
|
||||
}
|
||||
],
|
||||
pagination: {
|
||||
page: params["page"],
|
||||
size: params["size"],
|
||||
total: 100
|
||||
}
|
||||
});
|
||||
|
||||
ui.hideLoading();
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
async function onPull() {
|
||||
await refresh({ page: 1 });
|
||||
listViewRef.value!.stopRefresh();
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
ui.showLoading(t("加载中"));
|
||||
// 默认请求
|
||||
refresh({});
|
||||
});
|
||||
</script>
|
||||
68
cool-unix/pages/demo/data/list-view.uvue
Normal file
68
cool-unix/pages/demo/data/list-view.uvue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="page">
|
||||
<view class="p-3 pb-0">
|
||||
<demo-item>
|
||||
<cl-text
|
||||
>采用虚拟列表技术实现高性能渲染，支持海量数据无限滚动，当前演示数据规模：{{
|
||||
data.length
|
||||
}}条</cl-text
|
||||
>
|
||||
</demo-item>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<cl-list-view
|
||||
:data="data"
|
||||
:pt="{
|
||||
indexBar: {
|
||||
className: '!fixed'
|
||||
},
|
||||
itemHover: {
|
||||
className: 'bg-gray-200'
|
||||
}
|
||||
}"
|
||||
>
|
||||
</cl-list-view>
|
||||
</view>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { request } from "@/cool";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useListView, useUi, type ClListViewItem } from "@/uni_modules/cool-ui";
|
||||
import { ref } from "vue";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const data = ref<ClListViewItem[]>([]);
|
||||
|
||||
onReady(() => {
|
||||
ui.showLoading();
|
||||
|
||||
request({
|
||||
url: "https://unix.cool-js.com/data/pca_flat.json"
|
||||
})
|
||||
.then((res) => {
|
||||
data.value = useListView(res as UTSJSONObject[]);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
})
|
||||
.finally(() => {
|
||||
ui.hideLoading();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
height: 100%;
|
||||
|
||||
.list {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
cool-unix/pages/demo/data/list.uvue
Normal file
120
cool-unix/pages/demo/data/list.uvue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-list-item :label="t('用户名')">
|
||||
<cl-text>神仙都没用</cl-text>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('内容靠左')">
|
||||
<cl-list-item
|
||||
:label="t('QQ')"
|
||||
justify="start"
|
||||
:pt="{
|
||||
label: {
|
||||
className: '!w-10'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<cl-text>615206459</cl-text>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带箭头')">
|
||||
<cl-list-item label="年龄" arrow>
|
||||
<cl-text>18</cl-text>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带图标')">
|
||||
<cl-list-item :label="t('余额')" icon="wallet-line">
|
||||
<cl-text>10,9000</cl-text>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带图片')">
|
||||
<cl-list-item
|
||||
arrow
|
||||
:pt="{
|
||||
image: {
|
||||
width: 48,
|
||||
height: 48
|
||||
}
|
||||
}"
|
||||
:label="t('神仙都没用')"
|
||||
image="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||
>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('折叠')">
|
||||
<cl-list-item :label="t('点击展开')" collapse arrow>
|
||||
<template #collapse>
|
||||
<view class="bg-surface-100 dark:bg-surface-700 p-3 rounded-xl">
|
||||
<cl-text
|
||||
>云想衣裳花想容，春风拂槛露华浓。若非群玉山头见，会向瑶台月下逢。</cl-text
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('可滑动')">
|
||||
<cl-list-item :label="t('左滑编辑')" swipeable>
|
||||
<template #swipe-right>
|
||||
<view
|
||||
class="bg-green-500 w-20 h-full flex flex-row items-center justify-center"
|
||||
>
|
||||
<text class="text-white text-md">{{ t("编辑") }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item ref="listItemRef" :label="t('右滑删除')" swipeable>
|
||||
<template #swipe-left>
|
||||
<view
|
||||
class="bg-red-500 w-20 h-full flex flex-row items-center justify-center"
|
||||
@tap="onDelete"
|
||||
>
|
||||
<text class="text-white text-md">{{ t("删除") }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('禁用')">
|
||||
<cl-list-item :label="t('账号')" disabled>
|
||||
<cl-text>1234567890</cl-text>
|
||||
</cl-list-item>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('列表')">
|
||||
<cl-list border>
|
||||
<cl-list-item :label="t('我的订单')" hoverable> </cl-list-item>
|
||||
<cl-list-item :label="t('我的收藏')" hoverable> </cl-list-item>
|
||||
<cl-list-item :label="t('我的钱包')" hoverable> </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 { useUi } from "@/uni_modules/cool-ui";
|
||||
import { ref } from "vue";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const listItemRef = ref<ClListItemComponentPublicInstance | null>(null);
|
||||
|
||||
function onDelete() {
|
||||
ui.showToast({
|
||||
message: "删除成功"
|
||||
});
|
||||
|
||||
listItemRef.value!.resetSwipe();
|
||||
}
|
||||
</script>
|
||||
70
cool-unix/pages/demo/data/marquee.uvue
Normal file
70
cool-unix/pages/demo/data/marquee.uvue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('横向滚动')">
|
||||
<cl-marquee
|
||||
:list="list"
|
||||
direction="horizontal"
|
||||
:item-height="200"
|
||||
:item-width="360"
|
||||
:pt="{
|
||||
className: 'h-[200rpx] rounded-xl'
|
||||
}"
|
||||
></cl-marquee>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('纵向滚动')">
|
||||
<cl-marquee
|
||||
ref="marqueeRef"
|
||||
:list="list"
|
||||
direction="vertical"
|
||||
:item-height="260"
|
||||
:duration="isSpeed ? 2000 : 5000"
|
||||
:pt="{
|
||||
className: 'h-[500rpx] rounded-xl'
|
||||
}"
|
||||
></cl-marquee>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-5'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('快一点')">
|
||||
<cl-switch v-model="isSpeed"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('暂停')">
|
||||
<cl-switch v-model="isPause" @change="onPauseChange"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
import { ref } from "vue";
|
||||
|
||||
const marqueeRef = ref<ClMarqueeComponentPublicInstance | null>(null);
|
||||
|
||||
const list = ref<string[]>([
|
||||
"https://unix.cool-js.com/images/demo/bg1.png",
|
||||
"https://unix.cool-js.com/images/demo/bg2.png",
|
||||
"https://unix.cool-js.com/images/demo/bg3.png"
|
||||
]);
|
||||
|
||||
const isSpeed = ref(false);
|
||||
const isPause = ref(false);
|
||||
|
||||
function onPauseChange(value: boolean) {
|
||||
if (value) {
|
||||
marqueeRef.value!.pause();
|
||||
} else {
|
||||
marqueeRef.value!.play();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
70
cool-unix/pages/demo/data/pagination.uvue
Normal file
70
cool-unix/pages/demo/data/pagination.uvue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-pagination v-model="page1" :total="24"> </cl-pagination>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多页数')">
|
||||
<cl-pagination v-model="page2" :total="500"> </cl-pagination>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义样式')">
|
||||
<cl-pagination
|
||||
v-model="page3"
|
||||
:total="100"
|
||||
:pt="{
|
||||
item: {
|
||||
className: '!rounded-none !mx-[2rpx]'
|
||||
}
|
||||
}"
|
||||
>
|
||||
</cl-pagination>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义文本')">
|
||||
<cl-pagination
|
||||
v-model="page4"
|
||||
:total="24"
|
||||
:pt="{
|
||||
prev: {
|
||||
className: '!w-auto px-3'
|
||||
},
|
||||
next: {
|
||||
className: '!w-auto px-3'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #prev>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm'
|
||||
}"
|
||||
>{{ t("上一页") }}</cl-text
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #next>
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-sm'
|
||||
}"
|
||||
>{{ t("下一页") }}</cl-text
|
||||
>
|
||||
</template>
|
||||
</cl-pagination>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
|
||||
const page1 = ref(1);
|
||||
const page2 = ref(13);
|
||||
const page3 = ref(1);
|
||||
const page4 = ref(1);
|
||||
</script>
|
||||
110
cool-unix/pages/demo/data/read-more.uvue
Normal file
110
cool-unix/pages/demo/data/read-more.uvue
Normal file
@@ -0,0 +1,110 @@
|
||||
<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>
|
||||
71
cool-unix/pages/demo/data/timeline.uvue
Normal file
71
cool-unix/pages/demo/data/timeline.uvue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-timeline>
|
||||
<cl-timeline-item
|
||||
icon="account-box-line"
|
||||
:title="t('开通账号')"
|
||||
date="2025-01-01"
|
||||
:content="t('赠送500元')"
|
||||
>
|
||||
</cl-timeline-item>
|
||||
|
||||
<cl-timeline-item
|
||||
icon="id-card-line"
|
||||
:title="t('完成实名认证')"
|
||||
date="2025-01-02"
|
||||
:content="t('通过身份证认证')"
|
||||
>
|
||||
</cl-timeline-item>
|
||||
|
||||
<cl-timeline-item
|
||||
icon="bank-card-line"
|
||||
:title="t('绑定银行卡')"
|
||||
date="2025-01-03"
|
||||
:content="t('绑定招商银行储蓄卡')"
|
||||
>
|
||||
</cl-timeline-item>
|
||||
|
||||
<cl-timeline-item
|
||||
icon="money-cny-box-line"
|
||||
:title="t('首次充值')"
|
||||
date="2025-01-04"
|
||||
:content="t('充值1000元')"
|
||||
>
|
||||
</cl-timeline-item>
|
||||
|
||||
<cl-timeline-item
|
||||
icon="checkbox-line"
|
||||
:title="t('完成首笔交易')"
|
||||
date="2025-01-05"
|
||||
:hide-line="true"
|
||||
>
|
||||
<view class="flex flex-row mb-3 mt-1">
|
||||
<cl-image
|
||||
src="https://unix.cool-js.com/images/demo/bg1.png"
|
||||
></cl-image>
|
||||
|
||||
<view class="flex-1 px-3">
|
||||
<cl-text>{{ t("优选灵活配置混合A") }}</cl-text>
|
||||
|
||||
<cl-text class="mr-5 mt-1 text-sm">{{ t("1000元起") }}</cl-text>
|
||||
|
||||
<view class="flex flex-row mt-2 items-center">
|
||||
<cl-button size="small" type="light">{{
|
||||
t("立即购买")
|
||||
}}</cl-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</cl-timeline-item>
|
||||
</cl-timeline>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
391
cool-unix/pages/demo/data/tree.uvue
Normal file
391
cool-unix/pages/demo/data/tree.uvue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('树形结构')">
|
||||
<cl-tree
|
||||
v-model="checkedKeys"
|
||||
ref="treeRef"
|
||||
:list="list"
|
||||
:icon="isCustomIcon ? 'add-circle-line' : 'arrow-right-s-fill'"
|
||||
:expand-icon="isCustomIcon ? 'indeterminate-circle-line' : 'arrow-down-s-fill'"
|
||||
:checkable="true"
|
||||
:multiple="true"
|
||||
:check-strictly="checkStrictly"
|
||||
></cl-tree>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('父子关联')">
|
||||
<cl-switch v-model="checkStrictly"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('换个图标')">
|
||||
<cl-switch v-model="isCustomIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('选中值')">
|
||||
<cl-text>{{ checkedKeys.join("、") }}</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('选中操作')">
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="setChecked">{{ t("选中部分节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getChecked">{{ t("获取选中节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getHalfChecked">{{ t("获取半选节点") }}</cl-button>
|
||||
|
||||
<cl-text
|
||||
v-if="halfCheckedKeys.length > 0"
|
||||
:pt="{
|
||||
className: 'text-sm p-2'
|
||||
}"
|
||||
>{{ halfCheckedKeys.join("、") }}</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="clearChecked">{{ t("清空选中") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('展开操作')">
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="expand">{{ t("展开部分节点") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="getExpanded">{{ t("获取展开节点") }}</cl-button>
|
||||
|
||||
<cl-text
|
||||
v-if="expandedKeys.length > 0"
|
||||
:pt="{
|
||||
className: 'text-sm p-2'
|
||||
}"
|
||||
>{{ expandedKeys.join("、") }}</cl-text
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="expandAll">{{ t("展开所有") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="mb-2">
|
||||
<cl-button @tap="collapseAll">{{ t("收起所有") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
import { ref } from "vue";
|
||||
import { useTree, useUi, type ClTreeItem } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const list = ref<ClTreeItem[]>([]);
|
||||
|
||||
function refresh() {
|
||||
ui.showLoading();
|
||||
|
||||
setTimeout(() => {
|
||||
list.value = useTree([
|
||||
{
|
||||
id: "1",
|
||||
label: "华为",
|
||||
children: [
|
||||
{
|
||||
id: "1-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-1",
|
||||
label: "Mate系列",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-1-1",
|
||||
label: "Mate 50"
|
||||
},
|
||||
{
|
||||
id: "1-1-1-2",
|
||||
disabled: true,
|
||||
label: "Mate 40"
|
||||
},
|
||||
{
|
||||
id: "1-1-1-3",
|
||||
label: "Mate 30"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-1-2",
|
||||
label: "P系列",
|
||||
children: [
|
||||
{
|
||||
id: "1-1-2-1",
|
||||
disabled: true,
|
||||
label: "P60"
|
||||
},
|
||||
{
|
||||
id: "1-1-2-2",
|
||||
label: "P50"
|
||||
},
|
||||
{
|
||||
id: "1-1-2-3",
|
||||
label: "P40"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2",
|
||||
label: "笔记本",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-1",
|
||||
label: "MateBook X",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-1-1",
|
||||
label: "MateBook X Pro"
|
||||
},
|
||||
{
|
||||
id: "1-2-1-2",
|
||||
label: "MateBook X 2022"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2-2",
|
||||
label: "MateBook D",
|
||||
children: [
|
||||
{
|
||||
id: "1-2-2-1",
|
||||
label: "MateBook D 14"
|
||||
},
|
||||
{
|
||||
id: "1-2-2-2",
|
||||
label: "MateBook D 15"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "1-2-3",
|
||||
label: "MateBook 13"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "小米",
|
||||
isExpand: true,
|
||||
children: [
|
||||
{
|
||||
id: "2-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "2-1-1",
|
||||
label: "小米数字系列"
|
||||
},
|
||||
{
|
||||
id: "2-1-2",
|
||||
label: "Redmi系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2-2",
|
||||
label: "家电",
|
||||
children: [
|
||||
{
|
||||
id: "2-2-1",
|
||||
label: "电视"
|
||||
},
|
||||
{
|
||||
id: "2-2-2",
|
||||
label: "空调"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label: "苹果",
|
||||
children: [
|
||||
{
|
||||
id: "3-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "3-1-1",
|
||||
label: "iPhone 14"
|
||||
},
|
||||
{
|
||||
id: "3-1-2",
|
||||
label: "iPhone 13"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "3-2",
|
||||
label: "平板",
|
||||
children: [
|
||||
{
|
||||
id: "3-2-1",
|
||||
label: "iPad Pro"
|
||||
},
|
||||
{
|
||||
id: "3-2-2",
|
||||
label: "iPad Air"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
label: "OPPO",
|
||||
children: [
|
||||
{
|
||||
id: "4-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "4-1-1",
|
||||
label: "Find系列"
|
||||
},
|
||||
{
|
||||
id: "4-1-2",
|
||||
label: "Reno系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "4-2",
|
||||
label: "配件",
|
||||
children: [
|
||||
{
|
||||
id: "4-2-1",
|
||||
label: "耳机"
|
||||
},
|
||||
{
|
||||
id: "4-2-2",
|
||||
label: "手环"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
label: "vivo",
|
||||
children: [
|
||||
{
|
||||
id: "5-1",
|
||||
label: "手机",
|
||||
children: [
|
||||
{
|
||||
id: "5-1-1",
|
||||
label: "X系列"
|
||||
},
|
||||
{
|
||||
id: "5-1-2",
|
||||
label: "S系列"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "5-2",
|
||||
label: "智能设备",
|
||||
children: [
|
||||
{
|
||||
id: "5-2-1",
|
||||
label: "手表"
|
||||
},
|
||||
{
|
||||
id: "5-2-2",
|
||||
label: "耳机"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
ui.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 是否严格的遵循父子不互相关联
|
||||
const checkStrictly = ref(false);
|
||||
|
||||
// 是否自定义图标
|
||||
const isCustomIcon = ref(false);
|
||||
|
||||
// 树形组件引用
|
||||
const treeRef = ref<ClTreeComponentPublicInstance | null>(null);
|
||||
|
||||
// 选中节点的keys
|
||||
const checkedKeys = ref<(string | number)[]>(["1-1-1-1", "2-1-1", "2-1-2"]);
|
||||
const checkedKeys2 = ref<string | null>("1-1-1");
|
||||
|
||||
// 半选节点的keys
|
||||
const halfCheckedKeys = ref<(string | number)[]>([]);
|
||||
|
||||
// 展开节点的keys
|
||||
const expandedKeys = ref<(string | number)[]>([]);
|
||||
|
||||
// 演示方法
|
||||
function setChecked() {
|
||||
treeRef.value!.setCheckedKeys(["1-1", "2"]);
|
||||
}
|
||||
|
||||
function getChecked() {
|
||||
checkedKeys.value = treeRef.value!.getCheckedKeys();
|
||||
}
|
||||
|
||||
function clearChecked() {
|
||||
treeRef.value!.clearChecked();
|
||||
checkedKeys.value = [];
|
||||
halfCheckedKeys.value = [];
|
||||
}
|
||||
|
||||
function getHalfChecked() {
|
||||
halfCheckedKeys.value = treeRef.value!.getHalfCheckedKeys();
|
||||
}
|
||||
|
||||
function expand() {
|
||||
treeRef.value!.setExpandedKeys(["4", "5"]);
|
||||
}
|
||||
|
||||
function getExpanded() {
|
||||
expandedKeys.value = treeRef.value!.getExpandedKeys();
|
||||
}
|
||||
|
||||
function expandAll() {
|
||||
treeRef.value!.expandAll();
|
||||
expandedKeys.value = treeRef.value!.getExpandedKeys();
|
||||
}
|
||||
|
||||
function collapseAll() {
|
||||
treeRef.value!.collapseAll();
|
||||
expandedKeys.value = [];
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
138
cool-unix/pages/demo/data/waterfall.uvue
Normal file
138
cool-unix/pages/demo/data/waterfall.uvue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<cl-page back-top>
|
||||
<view class="py-2">
|
||||
<cl-waterfall ref="waterfallRef" :column="2" :gutter="16">
|
||||
<template #item="{ item, index }">
|
||||
<view class="bg-white mb-3 rounded-xl dark:!bg-gray-800 relative">
|
||||
<image
|
||||
:src="item['image']"
|
||||
mode="widthFix"
|
||||
class="w-full rounded-xl"
|
||||
></image>
|
||||
|
||||
<template v-if="item['isAd']">
|
||||
<cl-tag :pt="{ className: 'absolute left-1 top-1 scale-75' }"
|
||||
>广告</cl-tag
|
||||
>
|
||||
<cl-icon
|
||||
color="white"
|
||||
name="close-line"
|
||||
:pt="{ className: 'absolute right-2 top-2' }"
|
||||
@tap="del(item['id'] as number)"
|
||||
></cl-icon>
|
||||
</template>
|
||||
|
||||
<view class="p-3" v-else>
|
||||
<cl-text>{{ item["title"] }}</cl-text>
|
||||
|
||||
<cl-row class="mt-2" :pt="{ className: 'justify-end items-center' }">
|
||||
<cl-icon name="heart-line"></cl-icon>
|
||||
<cl-text :pt="{ className: 'text-sm ml-1' }">{{
|
||||
item["likeCount"]
|
||||
}}</cl-text>
|
||||
</cl-row>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</cl-waterfall>
|
||||
|
||||
<cl-loadmore :loading="true" safe-area-bottom></cl-loadmore>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { random } from "@/cool";
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const waterfallRef = ref<ClWaterfallComponentPublicInstance | null>(null);
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
let id = 0;
|
||||
|
||||
function refresh() {
|
||||
const items = [
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
|
||||
image: "https://unix.cool-js.com/images/demo/1.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
|
||||
image: "https://unix.cool-js.com/images/demo/2.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
|
||||
image: "https://unix.cool-js.com/images/demo/3.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
image: "https://unix.cool-js.com/images/demo/4.jpg",
|
||||
isAd: true
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
|
||||
image: "https://unix.cool-js.com/images/demo/5.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
|
||||
image: "https://unix.cool-js.com/images/demo/6.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
|
||||
image: "https://unix.cool-js.com/images/demo/7.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
|
||||
image: "https://unix.cool-js.com/images/demo/8.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
|
||||
image: "https://unix.cool-js.com/images/demo/9.jpg"
|
||||
},
|
||||
{
|
||||
id: id++,
|
||||
likeCount: random(100, 1000),
|
||||
title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
|
||||
image: "https://unix.cool-js.com/images/demo/10.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
waterfallRef.value!.append(items);
|
||||
}
|
||||
|
||||
function del(id: number) {
|
||||
waterfallRef.value!.remove(id);
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (loading.value) return;
|
||||
|
||||
loading.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
refresh();
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
refresh();
|
||||
});
|
||||
</script>
|
||||
206
cool-unix/pages/demo/feedback/action-sheet.uvue
Normal file
206
cool-unix/pages/demo/feedback/action-sheet.uvue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-button @tap="openActionSheet">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带图标')">
|
||||
<cl-button @tap="openActionSheet2">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带标题、描述')">
|
||||
<cl-button @tap="openActionSheet3">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('无法点击遮罩关闭')">
|
||||
<cl-button @tap="openActionSheet4">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不需要取消按钮')">
|
||||
<cl-button @tap="openActionSheet5">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('插槽用法')">
|
||||
<cl-button @tap="openActionSheet6">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
|
||||
<cl-action-sheet ref="actionSheetRef"> </cl-action-sheet>
|
||||
<cl-action-sheet ref="actionSheetRef2"> </cl-action-sheet>
|
||||
<cl-action-sheet ref="actionSheetRef3"> </cl-action-sheet>
|
||||
<cl-action-sheet ref="actionSheetRef4"> </cl-action-sheet>
|
||||
<cl-action-sheet ref="actionSheetRef5"> </cl-action-sheet>
|
||||
<cl-action-sheet
|
||||
ref="actionSheetRef6"
|
||||
:pt="{
|
||||
list: {
|
||||
className: 'flex-row mx-[-10rpx]'
|
||||
},
|
||||
item: {
|
||||
className: 'flex-1 mx-[10rpx] !rounded-xl'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<template #prepend>
|
||||
<view class="px-3 mb-3">
|
||||
<cl-text>开通会员享受更多特权和服务，包括无广告体验、专属客服等</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
<template #append>
|
||||
<view class="pb-5 pt-2 px-3 flex flex-row items-center">
|
||||
<cl-checkbox v-model="agree">请阅读并同意</cl-checkbox>
|
||||
<cl-text color="primary">《会员服务协议》</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template #item="{ item }">
|
||||
<view class="flex flex-col justify-center items-center">
|
||||
<cl-icon :name="item.icon" :size="46"></cl-icon>
|
||||
<cl-text :pt="{ className: 'text-sm mt-1' }">{{ item.label }}</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
</cl-action-sheet>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
import { useUi, type ClActionSheetOptions } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const actionSheetRef = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet() {
|
||||
actionSheetRef.value!.open({
|
||||
list: [
|
||||
{
|
||||
label: t("反馈")
|
||||
}
|
||||
]
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
|
||||
const actionSheetRef2 = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet2() {
|
||||
actionSheetRef.value!.open({
|
||||
list: [
|
||||
{
|
||||
label: t("反馈"),
|
||||
icon: "error-warning-line"
|
||||
}
|
||||
]
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
|
||||
const actionSheetRef3 = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet3() {
|
||||
actionSheetRef.value!.open({
|
||||
title: t("提示"),
|
||||
description: t("删除好友会同时删除所有聊天记录"),
|
||||
list: [
|
||||
{
|
||||
label: t("删除好友"),
|
||||
color: "error",
|
||||
callback() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除好友吗？"),
|
||||
callback(action) {
|
||||
if (action == "confirm") {
|
||||
ui.showToast({
|
||||
message: t("删除成功")
|
||||
});
|
||||
}
|
||||
|
||||
actionSheetRef.value!.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
|
||||
const actionSheetRef4 = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet4() {
|
||||
actionSheetRef.value!.open({
|
||||
maskClosable: false,
|
||||
description: t("无法点击遮罩关闭"),
|
||||
list: []
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
|
||||
const actionSheetRef5 = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet5() {
|
||||
actionSheetRef.value!.open({
|
||||
showCancel: false,
|
||||
list: [
|
||||
{
|
||||
label: t("点我关闭"),
|
||||
callback() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要关闭吗？"),
|
||||
callback(action) {
|
||||
if (action == "confirm") {
|
||||
actionSheetRef.value!.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
]
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
|
||||
const agree = ref(false);
|
||||
|
||||
const actionSheetRef6 = ref<ClActionSheetComponentPublicInstance | null>(null);
|
||||
|
||||
function openActionSheet6() {
|
||||
function done() {
|
||||
if (!agree.value) {
|
||||
ui.showToast({
|
||||
message: "请阅读并同意《会员服务协议》"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
ui.showToast({
|
||||
message: t("支付成功")
|
||||
});
|
||||
|
||||
agree.value = false;
|
||||
|
||||
actionSheetRef6.value!.close();
|
||||
}
|
||||
|
||||
actionSheetRef6.value!.open({
|
||||
showCancel: false,
|
||||
list: [
|
||||
{
|
||||
label: t("支付宝"),
|
||||
icon: "alipay-line",
|
||||
callback() {
|
||||
done();
|
||||
}
|
||||
},
|
||||
{
|
||||
label: t("微信"),
|
||||
icon: "wechat-line",
|
||||
callback() {
|
||||
done();
|
||||
}
|
||||
}
|
||||
]
|
||||
} as ClActionSheetOptions);
|
||||
}
|
||||
</script>
|
||||
94
cool-unix/pages/demo/feedback/confirm.uvue
Normal file
94
cool-unix/pages/demo/feedback/confirm.uvue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-button @tap="openPopup">{{ t("打开弹窗") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('隐藏取消按钮')">
|
||||
<cl-button @tap="openPopup2">{{ t("打开弹窗") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义文本')">
|
||||
<cl-button @tap="openPopup3">{{ t("打开弹窗") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('关闭前钩子')">
|
||||
<cl-button @tap="openPopup4">{{ t("打开弹窗") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('显示时长')">
|
||||
<cl-button @tap="openPopup5">{{ t("打开弹窗") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
function openPopup() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除吗？"),
|
||||
callback(action) {
|
||||
if (action == "confirm") {
|
||||
ui.showToast({
|
||||
message: t("确定")
|
||||
});
|
||||
} else {
|
||||
ui.showToast({
|
||||
message: t("取消")
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openPopup2() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除吗？"),
|
||||
showCancel: false
|
||||
});
|
||||
}
|
||||
|
||||
function openPopup3() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除吗？"),
|
||||
cancelText: t("关闭"),
|
||||
confirmText: t("下一步")
|
||||
});
|
||||
}
|
||||
|
||||
function openPopup4() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除吗？"),
|
||||
beforeClose: (action, { close, showLoading, hideLoading }) => {
|
||||
if (action == "confirm") {
|
||||
showLoading();
|
||||
|
||||
setTimeout(() => {
|
||||
close();
|
||||
}, 1000);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openPopup5() {
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("确定要删除吗？3秒后自动关闭"),
|
||||
duration: 3000
|
||||
});
|
||||
}
|
||||
</script>
|
||||
100
cool-unix/pages/demo/feedback/popup.uvue
Normal file
100
cool-unix/pages/demo/feedback/popup.uvue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-button @tap="openPopup">{{ t("打开弹窗") }}</cl-button>
|
||||
|
||||
<cl-list border class="mt-3">
|
||||
<view class="w-full p-2">
|
||||
<cl-tabs
|
||||
v-model="direction"
|
||||
:list="directionList"
|
||||
show-slider
|
||||
:height="66"
|
||||
></cl-tabs>
|
||||
</view>
|
||||
|
||||
<cl-list-item :label="t('设置宽度 80%')">
|
||||
<cl-switch v-model="isWidth"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('无头')">
|
||||
<cl-switch v-model="unShowHeader"></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-popup
|
||||
v-model="visible"
|
||||
:title="t('标题')"
|
||||
:direction="direction"
|
||||
:size="size"
|
||||
:show-header="!unShowHeader"
|
||||
:pt="{
|
||||
className: parseClass([[isCustom, '!p-3']]),
|
||||
inner: {
|
||||
className: parseClass([[isCustom, '!rounded-2xl']])
|
||||
}
|
||||
}"
|
||||
>
|
||||
<view
|
||||
class="p-3"
|
||||
:class="{
|
||||
'pt-0': !unShowHeader
|
||||
}"
|
||||
>
|
||||
<cl-image
|
||||
src="https://unix.cool-js.com/images/demo/bg1.png"
|
||||
class="mb-3"
|
||||
height="auto"
|
||||
width="100%"
|
||||
mode="widthFix"
|
||||
></cl-image>
|
||||
|
||||
<cl-text
|
||||
>春江花月夜， 花草复青青。 江水流不尽， 月光照无情。 夜来风雨急， 愁思满心头。
|
||||
何时再相见， 共赏月明楼。
|
||||
</cl-text>
|
||||
</view>
|
||||
</cl-popup>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { computed, ref } from "vue";
|
||||
import type { ClPopupDirection, ClTabsItem } from "@/uni_modules/cool-ui";
|
||||
import { parseClass } from "@/cool";
|
||||
|
||||
const visible = ref(false);
|
||||
const isWidth = ref(true);
|
||||
const unShowHeader = ref(false);
|
||||
const isCustom = ref(false);
|
||||
|
||||
const direction = ref<ClPopupDirection>("bottom");
|
||||
const directionList = ref<ClTabsItem[]>([
|
||||
{ label: t("底部"), value: "bottom" },
|
||||
{ label: t("顶部"), value: "top" },
|
||||
{ label: t("左侧"), value: "left" },
|
||||
{ label: t("右侧"), value: "right" },
|
||||
{ label: t("中间"), value: "center" }
|
||||
]);
|
||||
|
||||
const size = computed(() => {
|
||||
if (direction.value == "left" || direction.value == "right" || direction.value == "center") {
|
||||
return isWidth.value ? "80%" : "";
|
||||
}
|
||||
|
||||
return "";
|
||||
});
|
||||
|
||||
function openPopup() {
|
||||
visible.value = true;
|
||||
}
|
||||
</script>
|
||||
93
cool-unix/pages/demo/feedback/toast.uvue
Normal file
93
cool-unix/pages/demo/feedback/toast.uvue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-button @tap="open()">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同位置')">
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<cl-button type="light" @tap="open('top')">{{ t("顶部") }}</cl-button>
|
||||
<cl-button type="light" @tap="open('center')">{{ t("中间") }}</cl-button>
|
||||
<cl-button type="light" @tap="open('bottom')">{{ t("底部") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同类型')">
|
||||
<view class="flex flex-row flex-wrap mb-2 overflow-visible">
|
||||
<cl-button type="light" @tap="openType('success')">{{ t("成功") }}</cl-button>
|
||||
<cl-button type="light" @tap="openType('error')">{{ t("失败") }}</cl-button>
|
||||
<cl-button type="light" @tap="openType('warn')">{{ t("警告") }}</cl-button>
|
||||
<cl-button type="light" @tap="openType('question')">{{ t("问题") }}</cl-button>
|
||||
<cl-button type="light" @tap="openType('disabled')">{{ t("禁用") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<view class="flex flex-row flex-wrap overflow-visible">
|
||||
<cl-button type="light" @tap="openType('stop')">{{ t("停止") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义图标')">
|
||||
<view class="flex flex-row overflow-visible">
|
||||
<cl-button
|
||||
type="light"
|
||||
icon="star-line"
|
||||
@tap="openIcon('star-line')"
|
||||
></cl-button>
|
||||
|
||||
<cl-button
|
||||
type="light"
|
||||
icon="mail-line"
|
||||
@tap="openIcon('mail-line')"
|
||||
></cl-button>
|
||||
|
||||
<cl-button
|
||||
type="light"
|
||||
icon="file-line"
|
||||
@tap="openIcon('file-line')"
|
||||
></cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('只存在一个')">
|
||||
<cl-button @tap="openClear()">{{ t("打开") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useUi, type ClToastType } from "@/uni_modules/cool-ui";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
function open(position: "top" | "center" | "bottom" = "center") {
|
||||
ui.showToast({
|
||||
message: t("不同位置提示"),
|
||||
position: position
|
||||
});
|
||||
}
|
||||
|
||||
function openType(type: ClToastType) {
|
||||
ui.showToast({
|
||||
message: t("不同类型提示"),
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
function openIcon(icon: string) {
|
||||
ui.showToast({
|
||||
message: t("带图标提示"),
|
||||
icon
|
||||
});
|
||||
}
|
||||
|
||||
function openClear() {
|
||||
ui.showToast({
|
||||
message: t("移除其他已存在的提示"),
|
||||
clear: true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
206
cool-unix/pages/demo/form/calendar.uvue
Normal file
206
cool-unix/pages/demo/form/calendar.uvue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('选择器')">
|
||||
<cl-calendar-select v-model="date"></cl-calendar-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多选')">
|
||||
<cl-calendar-select v-model:date="dateArr" mode="multiple"></cl-calendar-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('范围选')">
|
||||
<cl-calendar-select v-model:date="dateRange" mode="range"></cl-calendar-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('开始 / 结束')">
|
||||
<cl-calendar-select
|
||||
v-model:date="dateRange3"
|
||||
mode="range"
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
></cl-calendar-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('禁用部分日期')">
|
||||
<cl-calendar-select v-model="date" :date-config="dateConfig"></cl-calendar-select>
|
||||
</demo-item>
|
||||
|
||||
<!-- <demo-item :label="t('日历长列表')">
|
||||
<cl-button>{{ t("打开日历长列表") }}</cl-button>
|
||||
</demo-item> -->
|
||||
|
||||
<demo-item :label="t('日历面板')">
|
||||
<cl-calendar
|
||||
v-model:date="dateRange2"
|
||||
mode="range"
|
||||
:month="10"
|
||||
:show-header="isShowHeader"
|
||||
:show-weeks="isShowWeeks"
|
||||
:show-other-month="isShowOtherMonth"
|
||||
:date-config="dateConfig2"
|
||||
@change="onChange"
|
||||
></cl-calendar>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-5'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('自定义文案和颜色')">
|
||||
<cl-switch v-model="isCustomDateConfig"></cl-switch>
|
||||
</cl-list-item>
|
||||
<cl-list-item :label="t('显示头')">
|
||||
<cl-switch v-model="isShowHeader"></cl-switch>
|
||||
</cl-list-item>
|
||||
<cl-list-item :label="t('显示星期')">
|
||||
<cl-switch v-model="isShowWeeks"></cl-switch>
|
||||
</cl-list-item>
|
||||
<cl-list-item :label="t('显示其他月份')">
|
||||
<cl-switch v-model="isShowOtherMonth"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { dayUts, first, last } from "@/cool";
|
||||
import type { ClCalendarDateConfig } from "@/uni_modules/cool-ui";
|
||||
|
||||
const date = ref<string | null>(dayUts().format("YYYY-MM-DD"));
|
||||
|
||||
const dateArr = ref<string[]>([
|
||||
dayUts().format("YYYY-MM-DD"),
|
||||
dayUts().add(1, "day").format("YYYY-MM-DD")
|
||||
]);
|
||||
|
||||
const dateRange = ref<string[]>([
|
||||
dayUts().format("YYYY-MM-DD"),
|
||||
dayUts().add(10, "day").format("YYYY-MM-DD")
|
||||
]);
|
||||
|
||||
const dateConfig = ref<ClCalendarDateConfig[]>([
|
||||
{
|
||||
date: dayUts().add(1, "day").format("YYYY-MM-DD"),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
date: dayUts().add(2, "day").format("YYYY-MM-DD"),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
date: dayUts().add(3, "day").format("YYYY-MM-DD"),
|
||||
disabled: true
|
||||
}
|
||||
]);
|
||||
|
||||
const isShowHeader = ref(true);
|
||||
const isShowWeeks = ref(true);
|
||||
const isShowOtherMonth = ref(true);
|
||||
const isCustomDateConfig = ref(true);
|
||||
|
||||
const dateRange2 = ref<string[]>([]);
|
||||
|
||||
const dateConfig2 = computed(() => {
|
||||
const dates = (
|
||||
isCustomDateConfig.value
|
||||
? [
|
||||
{
|
||||
date: "2025-10-01",
|
||||
topText: "国庆节",
|
||||
bottomText: "¥958",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-02",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-03",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-04",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-05",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-06",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-07",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
},
|
||||
{
|
||||
date: "2025-10-08",
|
||||
topText: "休",
|
||||
bottomText: "¥613",
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
: []
|
||||
) as ClCalendarDateConfig[];
|
||||
|
||||
const startDate = first(dateRange2.value);
|
||||
const endDate = last(dateRange2.value);
|
||||
|
||||
if (startDate != null) {
|
||||
const item = dates.find((e) => e.date == startDate);
|
||||
|
||||
if (item == null) {
|
||||
dates.push({
|
||||
date: startDate,
|
||||
bottomText: "入住"
|
||||
} as ClCalendarDateConfig);
|
||||
} else {
|
||||
item.bottomText = "入住";
|
||||
}
|
||||
}
|
||||
|
||||
if (endDate != null && dateRange2.value.length > 1) {
|
||||
const item = dates.find((e) => e.date == endDate);
|
||||
|
||||
if (item == null) {
|
||||
dates.push({
|
||||
date: endDate,
|
||||
bottomText: "离店"
|
||||
} as ClCalendarDateConfig);
|
||||
} else {
|
||||
item.bottomText = "离店";
|
||||
}
|
||||
}
|
||||
|
||||
return dates;
|
||||
});
|
||||
|
||||
const dateRange3 = ref<string[]>([]);
|
||||
|
||||
const startDate = dayUts().format("YYYY-MM-DD");
|
||||
const endDate = dayUts().add(10, "day").format("YYYY-MM-DD");
|
||||
|
||||
function onChange(date: string[]) {
|
||||
console.log("日期变化:", date);
|
||||
}
|
||||
</script>
|
||||
509
cool-unix/pages/demo/form/cascader.uvue
Normal file
509
cool-unix/pages/demo/form/cascader.uvue
Normal file
@@ -0,0 +1,509 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-cascader v-model="form.cascader1" :options="options"></cl-cascader>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带索引、地区选择')">
|
||||
<cl-cascader v-model="form.cascader2" :options="options2"></cl-cascader>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-cascader
|
||||
v-model="form.cascader3"
|
||||
:options="options"
|
||||
:disabled="isDisabled"
|
||||
:text-separator="isSeparator ? ' / ' : ' - '"
|
||||
:height="isHeight ? 500 : 800"
|
||||
></cl-cascader>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('换个分隔符')">
|
||||
<cl-switch v-model="isSeparator"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('列表高度小一点')">
|
||||
<cl-switch v-model="isHeight"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useCascader, type ClCascaderOption } from "@/uni_modules/cool-ui";
|
||||
import { t } from "@/locale";
|
||||
import pca from "@/data/pca.json";
|
||||
|
||||
type Form = {
|
||||
cascader1: string[];
|
||||
cascader2: string[];
|
||||
cascader3: string[];
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
cascader1: [],
|
||||
cascader2: [],
|
||||
cascader3: []
|
||||
});
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const isSeparator = ref(false);
|
||||
const isHeight = ref(false);
|
||||
|
||||
const options = ref<ClCascaderOption[]>([
|
||||
{
|
||||
label: "电子产品",
|
||||
value: "1",
|
||||
children: [
|
||||
{
|
||||
label: "手机",
|
||||
value: "1-1",
|
||||
children: [
|
||||
{
|
||||
label: "苹果",
|
||||
value: "1-1-1",
|
||||
children: [
|
||||
{
|
||||
label: "iPhone 15 Pro Max",
|
||||
value: "1-1-1-1"
|
||||
},
|
||||
{
|
||||
label: "iPhone 15 Pro",
|
||||
value: "1-1-1-2"
|
||||
},
|
||||
{
|
||||
label: "iPhone 15",
|
||||
value: "1-1-1-3"
|
||||
},
|
||||
{
|
||||
label: "iPhone 14 Pro Max",
|
||||
value: "1-1-1-4"
|
||||
},
|
||||
{
|
||||
label: "iPhone 14",
|
||||
value: "1-1-1-5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "华为",
|
||||
value: "1-1-2",
|
||||
children: [
|
||||
{
|
||||
label: "Mate 60 Pro+",
|
||||
value: "1-1-2-1"
|
||||
},
|
||||
{
|
||||
label: "Mate 60 Pro",
|
||||
value: "1-1-2-2"
|
||||
},
|
||||
{
|
||||
label: "Mate 60",
|
||||
value: "1-1-2-3"
|
||||
},
|
||||
{
|
||||
label: "P60 Pro",
|
||||
value: "1-1-2-4"
|
||||
},
|
||||
{
|
||||
label: "P60",
|
||||
value: "1-1-2-5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "小米",
|
||||
value: "1-1-3",
|
||||
children: [
|
||||
{
|
||||
label: "小米14 Pro",
|
||||
value: "1-1-3-1"
|
||||
},
|
||||
{
|
||||
label: "小米14",
|
||||
value: "1-1-3-2"
|
||||
},
|
||||
{
|
||||
label: "Redmi K70 Pro",
|
||||
value: "1-1-3-3"
|
||||
},
|
||||
{
|
||||
label: "Redmi K70",
|
||||
value: "1-1-3-4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "电脑",
|
||||
value: "1-2",
|
||||
children: [
|
||||
{
|
||||
label: "笔记本",
|
||||
value: "1-2-1",
|
||||
children: [
|
||||
{
|
||||
label: "MacBook Pro 16",
|
||||
value: "1-2-1-1"
|
||||
},
|
||||
{
|
||||
label: "MacBook Pro 14",
|
||||
value: "1-2-1-2"
|
||||
},
|
||||
{
|
||||
label: "MacBook Air 15",
|
||||
value: "1-2-1-3"
|
||||
},
|
||||
{
|
||||
label: "ThinkPad X1",
|
||||
value: "1-2-1-4"
|
||||
},
|
||||
{
|
||||
label: "ROG 魔霸新锐",
|
||||
value: "1-2-1-5"
|
||||
},
|
||||
{
|
||||
label: "拯救者 Y9000P",
|
||||
value: "1-2-1-6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "台式机",
|
||||
value: "1-2-2",
|
||||
children: [
|
||||
{
|
||||
label: "iMac 24寸",
|
||||
value: "1-2-2-1"
|
||||
},
|
||||
{
|
||||
label: "Mac Studio",
|
||||
value: "1-2-2-2"
|
||||
},
|
||||
{
|
||||
label: "Mac Pro",
|
||||
value: "1-2-2-3"
|
||||
},
|
||||
{
|
||||
label: "外星人",
|
||||
value: "1-2-2-4"
|
||||
},
|
||||
{
|
||||
label: "惠普暗影精灵",
|
||||
value: "1-2-2-5"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "平板",
|
||||
value: "1-3",
|
||||
children: [
|
||||
{
|
||||
label: "iPad",
|
||||
value: "1-3-1",
|
||||
children: [
|
||||
{
|
||||
label: "iPad Pro 12.9",
|
||||
value: "1-3-1-1"
|
||||
},
|
||||
{
|
||||
label: "iPad Pro 11",
|
||||
value: "1-3-1-2"
|
||||
},
|
||||
{
|
||||
label: "iPad Air",
|
||||
value: "1-3-1-3"
|
||||
},
|
||||
{
|
||||
label: "iPad mini",
|
||||
value: "1-3-1-4"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "安卓平板",
|
||||
value: "1-3-2",
|
||||
children: [
|
||||
{
|
||||
label: "小米平板6 Pro",
|
||||
value: "1-3-2-1"
|
||||
},
|
||||
{
|
||||
label: "华为MatePad Pro",
|
||||
value: "1-3-2-2"
|
||||
},
|
||||
{
|
||||
label: "三星Galaxy Tab S9",
|
||||
value: "1-3-2-3"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "服装",
|
||||
value: "2",
|
||||
children: [
|
||||
{
|
||||
label: "男装",
|
||||
value: "2-1",
|
||||
children: [
|
||||
{
|
||||
label: "上衣",
|
||||
value: "2-1-1",
|
||||
children: [
|
||||
{
|
||||
label: "短袖T恤",
|
||||
value: "2-1-1-1"
|
||||
},
|
||||
{
|
||||
label: "长袖T恤",
|
||||
value: "2-1-1-2"
|
||||
},
|
||||
{
|
||||
label: "衬衫",
|
||||
value: "2-1-1-3"
|
||||
},
|
||||
{
|
||||
label: "卫衣",
|
||||
value: "2-1-1-4"
|
||||
},
|
||||
{
|
||||
label: "夹克",
|
||||
value: "2-1-1-5"
|
||||
},
|
||||
{
|
||||
label: "毛衣",
|
||||
value: "2-1-1-6"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "裤装",
|
||||
value: "2-1-2",
|
||||
children: [
|
||||
{
|
||||
label: "牛仔裤",
|
||||
value: "2-1-2-1"
|
||||
},
|
||||
{
|
||||
label: "休闲裤",
|
||||
value: "2-1-2-2"
|
||||
},
|
||||
{
|
||||
label: "运动裤",
|
||||
value: "2-1-2-3"
|
||||
},
|
||||
{
|
||||
label: "西裤",
|
||||
value: "2-1-2-4"
|
||||
},
|
||||
{
|
||||
label: "短裤",
|
||||
value: "2-1-2-5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "外套",
|
||||
value: "2-1-3",
|
||||
children: [
|
||||
{
|
||||
label: "羽绒服",
|
||||
value: "2-1-3-1"
|
||||
},
|
||||
{
|
||||
label: "大衣",
|
||||
value: "2-1-3-2"
|
||||
},
|
||||
{
|
||||
label: "夹克",
|
||||
value: "2-1-3-3"
|
||||
},
|
||||
{
|
||||
label: "西装",
|
||||
value: "2-1-3-4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "女装",
|
||||
value: "2-2",
|
||||
children: [
|
||||
{
|
||||
label: "裙装",
|
||||
value: "2-2-1",
|
||||
children: [
|
||||
{
|
||||
label: "连衣裙",
|
||||
value: "2-2-1-1"
|
||||
},
|
||||
{
|
||||
label: "半身裙",
|
||||
value: "2-2-1-2"
|
||||
},
|
||||
{
|
||||
label: "A字裙",
|
||||
value: "2-2-1-3"
|
||||
},
|
||||
{
|
||||
label: "包臀裙",
|
||||
value: "2-2-1-4"
|
||||
},
|
||||
{
|
||||
label: "百褶裙",
|
||||
value: "2-2-1-5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "上装",
|
||||
value: "2-2-2",
|
||||
children: [
|
||||
{
|
||||
label: "衬衫",
|
||||
value: "2-2-2-1"
|
||||
},
|
||||
{
|
||||
label: "T恤",
|
||||
value: "2-2-2-2"
|
||||
},
|
||||
{
|
||||
label: "毛衣",
|
||||
value: "2-2-2-3"
|
||||
},
|
||||
{
|
||||
label: "卫衣",
|
||||
value: "2-2-2-4"
|
||||
},
|
||||
{
|
||||
label: "雪纺衫",
|
||||
value: "2-2-2-5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "外套",
|
||||
value: "2-2-3",
|
||||
children: [
|
||||
{
|
||||
label: "风衣",
|
||||
value: "2-2-3-1"
|
||||
},
|
||||
{
|
||||
label: "羽绒服",
|
||||
value: "2-2-3-2"
|
||||
},
|
||||
{
|
||||
label: "大衣",
|
||||
value: "2-2-3-3"
|
||||
},
|
||||
{
|
||||
label: "西装",
|
||||
value: "2-2-3-4"
|
||||
},
|
||||
{
|
||||
label: "皮衣",
|
||||
value: "2-2-3-5"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "食品",
|
||||
value: "3",
|
||||
children: [
|
||||
{
|
||||
label: "水果",
|
||||
value: "3-1",
|
||||
children: [
|
||||
{
|
||||
label: "苹果",
|
||||
value: "3-1-1"
|
||||
},
|
||||
{
|
||||
label: "香蕉",
|
||||
value: "3-1-2"
|
||||
},
|
||||
{
|
||||
label: "橘子",
|
||||
value: "3-1-3"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "蔬菜",
|
||||
value: "3-2",
|
||||
children: [
|
||||
{
|
||||
label: "西红柿",
|
||||
value: "3-2-1"
|
||||
},
|
||||
{
|
||||
label: "黄瓜",
|
||||
value: "3-2-2"
|
||||
},
|
||||
{
|
||||
label: "胡萝卜",
|
||||
value: "3-2-3"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "饮料",
|
||||
value: "4",
|
||||
children: [
|
||||
{
|
||||
label: "果汁",
|
||||
value: "4-1",
|
||||
children: [
|
||||
{
|
||||
label: "苹果汁",
|
||||
value: "4-1-1"
|
||||
},
|
||||
{
|
||||
label: "橙汁",
|
||||
value: "4-1-2"
|
||||
},
|
||||
{
|
||||
label: "葡萄汁",
|
||||
value: "4-1-3"
|
||||
},
|
||||
{
|
||||
label: "西瓜汁",
|
||||
value: "4-1-4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const options2 = useCascader(pca);
|
||||
</script>
|
||||
163
cool-unix/pages/demo/form/checkbox.uvue
Normal file
163
cool-unix/pages/demo/form/checkbox.uvue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-checkbox
|
||||
v-model="checked2"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:pt="{
|
||||
className: 'mr-5'
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-checkbox>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('单个 true / false')">
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-checkbox v-model="checked4">同意并阅读</cl-checkbox>
|
||||
<cl-text color="primary">《用户协议》</cl-text>
|
||||
|
||||
<view class="flex-1"></view>
|
||||
|
||||
<cl-switch v-model="checked4"></cl-switch>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('纵向排列')">
|
||||
<cl-checkbox
|
||||
v-model="checked"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'py-2',
|
||||
[
|
||||
isVerticalCustom,
|
||||
'justify-between border border-solid border-surface-200 rounded-lg p-2 !my-1'
|
||||
]
|
||||
])
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-checkbox>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-2'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('换个样式')">
|
||||
<cl-switch v-model="isVerticalCustom"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-3 flex flex-row flex-wrap">
|
||||
<cl-checkbox
|
||||
v-model="checked3"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:disabled="isDisabled"
|
||||
:show-icon="!isHideIcon"
|
||||
:active-icon="isIcon ? 'heart-fill' : 'checkbox-line'"
|
||||
:inactive-icon="isIcon ? 'heart-line' : 'checkbox-blank-line'"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mr-5',
|
||||
[isCustom, 'bg-surface-100 py-2 px-3 rounded-lg !mr-2 !mb-2'],
|
||||
{
|
||||
'!bg-surface-700': isDark && isCustom
|
||||
}
|
||||
]),
|
||||
icon: {
|
||||
className: parseClass([
|
||||
[
|
||||
isCustom && checked3.includes(item.value as string),
|
||||
'text-red-500'
|
||||
]
|
||||
])
|
||||
},
|
||||
label: {
|
||||
className: parseClass([
|
||||
[
|
||||
isCustom && checked3.includes(item.value as string),
|
||||
'text-red-500'
|
||||
]
|
||||
])
|
||||
}
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-checkbox>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list-item :label="t('换个图标')">
|
||||
<cl-switch v-model="isIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('不显示图标')">
|
||||
<cl-switch v-model="isHideIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></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 { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useUi, type ClCheckboxOption } from "@/uni_modules/cool-ui";
|
||||
import { isDark, parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const isIcon = ref(false);
|
||||
const isCustom = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isHideIcon = ref(false);
|
||||
const isVerticalCustom = ref(false);
|
||||
|
||||
const checked = ref<string[]>([]);
|
||||
const checked2 = ref<string[]>(["2"]);
|
||||
const checked3 = ref<string[]>(["2", "3"]);
|
||||
const checked4 = ref(false);
|
||||
|
||||
const options = ref<ClCheckboxOption[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
381
cool-unix/pages/demo/form/form.uvue
Normal file
381
cool-unix/pages/demo/form/form.uvue
Normal file
@@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item>
|
||||
<cl-form
|
||||
:pt="{
|
||||
className: 'p-2 pb-0'
|
||||
}"
|
||||
v-model="formData"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:disabled="saving"
|
||||
label-position="top"
|
||||
>
|
||||
<cl-form-item prop="avatarUrl">
|
||||
<cl-upload v-model="formData.avatarUrl" test></cl-upload>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('用户名')" prop="nickName" required>
|
||||
<cl-input
|
||||
v-model="formData.nickName"
|
||||
:placeholder="t('请输入用户名')"
|
||||
clearable
|
||||
></cl-input>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('邮箱')" prop="email">
|
||||
<cl-input
|
||||
v-model="formData.email"
|
||||
:placeholder="t('请输入邮箱地址')"
|
||||
></cl-input>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('动态验证')" required prop="contacts">
|
||||
<view
|
||||
class="contacts border border-solid border-surface-200 rounded-xl p-3 dark:!border-surface-700"
|
||||
>
|
||||
<cl-form-item
|
||||
v-for="(item, index) in formData.contacts"
|
||||
:key="index"
|
||||
:label="t('联系人') + ` - ${index + 1}`"
|
||||
:prop="`contacts[${index}].phone`"
|
||||
:rules="
|
||||
[
|
||||
{
|
||||
required: true,
|
||||
message: t('手机号不能为空')
|
||||
}
|
||||
] as ClFormRule[]
|
||||
"
|
||||
required
|
||||
>
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-input
|
||||
:pt="{
|
||||
className: 'flex-1 mr-2'
|
||||
}"
|
||||
v-model="item.phone"
|
||||
:placeholder="t('请输入手机号')"
|
||||
></cl-input>
|
||||
|
||||
<cl-button
|
||||
type="light"
|
||||
icon="subtract-line"
|
||||
@tap="removeContact(index)"
|
||||
></cl-button>
|
||||
</view>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-button icon="add-line" @tap="addContact">{{
|
||||
t("添加联系人")
|
||||
}}</cl-button>
|
||||
</view>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('身高')" prop="height" required>
|
||||
<cl-slider v-model="formData.height" :max="220" show-value>
|
||||
<template #value="{ value }">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-center w-[120rpx]'
|
||||
}"
|
||||
>{{ value }} cm</cl-text
|
||||
>
|
||||
</template>
|
||||
</cl-slider>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('体重')" prop="weight" required>
|
||||
<cl-slider v-model="formData.weight" :max="150" show-value>
|
||||
<template #value="{ value }">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'text-center w-[120rpx]'
|
||||
}"
|
||||
>{{ value }} kg</cl-text
|
||||
>
|
||||
</template>
|
||||
</cl-slider>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('标签')" prop="tags" required>
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-checkbox
|
||||
v-model="formData.tags"
|
||||
v-for="(item, index) in tagsOptions"
|
||||
:key="index"
|
||||
:value="index"
|
||||
:pt="{
|
||||
className: 'mr-5 mt-2'
|
||||
}"
|
||||
>{{ item.label }}</cl-checkbox
|
||||
>
|
||||
</view>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('性别')" prop="gender" required>
|
||||
<cl-select v-model="formData.gender" :options="genderOptions"></cl-select>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('所在地区')" prop="pca" required>
|
||||
<cl-cascader v-model="formData.pca" :options="pcaOptions"></cl-cascader>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('出生年月')" prop="birthday" required>
|
||||
<cl-select-date v-model="formData.birthday" type="date"></cl-select-date>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('个人简介')" prop="description">
|
||||
<cl-textarea
|
||||
v-model="formData.description"
|
||||
:placeholder="t('请输入个人简介')"
|
||||
:maxlength="200"
|
||||
></cl-textarea>
|
||||
</cl-form-item>
|
||||
|
||||
<cl-form-item :label="t('公开状态')">
|
||||
<cl-switch v-model="formData.isPublic"></cl-switch>
|
||||
</cl-form-item>
|
||||
</cl-form>
|
||||
</demo-item>
|
||||
|
||||
<demo-item>
|
||||
<cl-text pre-wrap :pt="{ className: 'text-sm p-2' }">{{
|
||||
JSON.stringify(formData, null, 4)
|
||||
}}</cl-text>
|
||||
</demo-item>
|
||||
</view>
|
||||
|
||||
<cl-footer>
|
||||
<view class="flex flex-row">
|
||||
<cl-button type="info" :pt="{ className: 'flex-1' }" @click="reset">{{
|
||||
t("重置")
|
||||
}}</cl-button>
|
||||
<cl-button
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
:pt="{ className: 'flex-1' }"
|
||||
@click="submit"
|
||||
>{{ t("提交") }}</cl-button
|
||||
>
|
||||
</view>
|
||||
</cl-footer>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, type Ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import {
|
||||
useCascader,
|
||||
useForm,
|
||||
useUi,
|
||||
type ClFormRule,
|
||||
type ClSelectOption
|
||||
} from "@/uni_modules/cool-ui";
|
||||
import pca from "@/data/pca.json";
|
||||
import { t } from "@/locale";
|
||||
import { dayUts } from "@/cool";
|
||||
|
||||
const ui = useUi();
|
||||
const { formRef, validate, clearValidate } = useForm();
|
||||
|
||||
// 性别选项
|
||||
const genderOptions = [
|
||||
{
|
||||
label: t("未知"),
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: t("男"),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: t("女"),
|
||||
value: 2
|
||||
}
|
||||
] as ClSelectOption[];
|
||||
|
||||
// 标签选项
|
||||
const tagsOptions = [
|
||||
{
|
||||
label: t("篮球"),
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: t("足球"),
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: t("羽毛球"),
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: t("乒乓球"),
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: t("游泳"),
|
||||
value: 5
|
||||
}
|
||||
] as ClSelectOption[];
|
||||
|
||||
// 地区选项
|
||||
const pcaOptions = useCascader(pca);
|
||||
|
||||
type Contact = {
|
||||
phone: string;
|
||||
};
|
||||
|
||||
// 自定义表单数据类型
|
||||
type FormData = {
|
||||
avatarUrl: string;
|
||||
nickName: string;
|
||||
email: string;
|
||||
height: number;
|
||||
weight: number;
|
||||
gender: number;
|
||||
description: string;
|
||||
pca: string[];
|
||||
tags: number[];
|
||||
birthday: string;
|
||||
isPublic: boolean;
|
||||
contacts: Contact[];
|
||||
};
|
||||
|
||||
// 表单数据
|
||||
const formData = ref<FormData>({
|
||||
avatarUrl: "",
|
||||
nickName: "神仙都没用",
|
||||
email: "",
|
||||
height: 180,
|
||||
weight: 70,
|
||||
gender: 0,
|
||||
description: "",
|
||||
pca: [],
|
||||
tags: [1, 2],
|
||||
birthday: "",
|
||||
isPublic: false,
|
||||
contacts: []
|
||||
}) as Ref<FormData>;
|
||||
|
||||
// 表单验证规则
|
||||
const rules = new Map<string, ClFormRule[]>([
|
||||
[
|
||||
"nickName",
|
||||
[
|
||||
{ required: true, message: t("用户名不能为空") },
|
||||
{ min: 3, max: 20, message: t("用户名长度在3-20个字符之间") }
|
||||
]
|
||||
],
|
||||
[
|
||||
"email",
|
||||
[
|
||||
{ required: true, message: t("邮箱不能为空") },
|
||||
{ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: t("邮箱格式不正确") }
|
||||
]
|
||||
],
|
||||
[
|
||||
"height",
|
||||
[
|
||||
{ required: true, message: t("身高不能为空") },
|
||||
{ min: 160, max: 190, message: t("身高在160-190cm之间") }
|
||||
]
|
||||
],
|
||||
[
|
||||
"weight",
|
||||
[
|
||||
{ required: true, message: t("体重不能为空") },
|
||||
{ min: 40, max: 100, message: t("体重在40-100kg之间") }
|
||||
]
|
||||
],
|
||||
[
|
||||
"tags",
|
||||
[
|
||||
{ required: true, message: t("标签不能为空") },
|
||||
{ min: 1, max: 2, message: t("标签最多选择2个") }
|
||||
]
|
||||
],
|
||||
["gender", [{ required: true, message: t("性别不能为空") }]],
|
||||
["pca", [{ required: true, message: t("所在地区不能为空") }]],
|
||||
[
|
||||
"birthday",
|
||||
[
|
||||
{ required: true, message: t("出生年月不能为空") },
|
||||
{
|
||||
validator(value) {
|
||||
if (dayUts(value).isAfter(dayUts("2010-01-01"))) {
|
||||
return t("出生年月不大于2010-01-01");
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
[
|
||||
"contacts",
|
||||
[
|
||||
{
|
||||
required: true,
|
||||
message: t("联系人不能为空")
|
||||
}
|
||||
]
|
||||
]
|
||||
]);
|
||||
|
||||
// 是否保存中
|
||||
const saving = ref(false);
|
||||
|
||||
// 重置表单数据
|
||||
function reset() {
|
||||
formData.value.avatarUrl = "";
|
||||
formData.value.nickName = "";
|
||||
formData.value.email = "";
|
||||
formData.value.height = 180;
|
||||
formData.value.weight = 70;
|
||||
formData.value.gender = 0;
|
||||
formData.value.description = "";
|
||||
formData.value.pca = [];
|
||||
formData.value.tags = [];
|
||||
formData.value.birthday = "";
|
||||
formData.value.isPublic = false;
|
||||
formData.value.contacts = [];
|
||||
|
||||
clearValidate();
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
function submit() {
|
||||
validate((valid, errors) => {
|
||||
if (valid) {
|
||||
saving.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
ui.showToast({
|
||||
message: t("提交成功"),
|
||||
icon: "check-line"
|
||||
});
|
||||
|
||||
saving.value = false;
|
||||
reset();
|
||||
}, 2000);
|
||||
} else {
|
||||
ui.showToast({
|
||||
message: errors[0].message
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addContact() {
|
||||
formData.value.contacts.push({
|
||||
phone: ""
|
||||
});
|
||||
}
|
||||
|
||||
function removeContact(index: number) {
|
||||
formData.value.contacts.splice(index, 1);
|
||||
}
|
||||
</script>
|
||||
93
cool-unix/pages/demo/form/input-number.uvue
Normal file
93
cool-unix/pages/demo/form/input-number.uvue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-input-number></cl-input-number>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-5 flex flex-row justify-center">
|
||||
<cl-input-number
|
||||
v-model="num"
|
||||
:step="isStep ? 10 : 1"
|
||||
:min="isMin ? 10 : 0"
|
||||
:max="isMax ? 50 : 100"
|
||||
:input-type="isDigit ? 'digit' : 'number'"
|
||||
:inputable="isInput"
|
||||
:disabled="isDisabled"
|
||||
:size="isSize ? 60 : 50"
|
||||
:pt="{
|
||||
op: {
|
||||
className: parseClass({
|
||||
'!rounded-full': isCustom
|
||||
})
|
||||
},
|
||||
value: {
|
||||
className: parseClass({
|
||||
'!rounded-full': isCustom
|
||||
})
|
||||
}
|
||||
}"
|
||||
@change="onChange"
|
||||
></cl-input-number>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list-item :label="t('步进为10')">
|
||||
<cl-switch v-model="isStep"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('最小为10')">
|
||||
<cl-switch v-model="isMin"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('最大为50')">
|
||||
<cl-switch v-model="isMax"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('可以小数')">
|
||||
<cl-switch v-model="isDigit"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('可以输入')">
|
||||
<cl-switch v-model="isInput"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('大一点')">
|
||||
<cl-switch v-model="isSize"></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 { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const num = ref(0);
|
||||
|
||||
const isStep = ref(false);
|
||||
const isMin = ref(false);
|
||||
const isMax = ref(false);
|
||||
const isDigit = ref(false);
|
||||
const isInput = ref(true);
|
||||
const isDisabled = ref(false);
|
||||
const isSize = ref(false);
|
||||
const isCustom = ref(false);
|
||||
|
||||
function onChange(value: number) {
|
||||
console.log(value);
|
||||
}
|
||||
</script>
|
||||
73
cool-unix/pages/demo/form/input-otp.uvue
Normal file
73
cool-unix/pages/demo/form/input-otp.uvue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-input-otp @done="toDone"></cl-input-otp>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自动聚焦')">
|
||||
<cl-input-otp autofocus @done="toDone"></cl-input-otp>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-input-otp
|
||||
:length="isLength ? 6 : 4"
|
||||
:disabled="isDisabled"
|
||||
:pt="{
|
||||
item: {
|
||||
className: parseClass({
|
||||
'!bg-sky-100': isCustom,
|
||||
'!border-white': isCustom
|
||||
})
|
||||
},
|
||||
value: {
|
||||
className: parseClass({
|
||||
'!text-sky-700': isCustom
|
||||
})
|
||||
},
|
||||
cursor: {
|
||||
className: parseClass({
|
||||
'!bg-sky-700': isCustom
|
||||
})
|
||||
}
|
||||
}"
|
||||
@done="toDone"
|
||||
></cl-input-otp>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('长度为6')">
|
||||
<cl-switch v-model="isLength"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></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 { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const isLength = ref(true);
|
||||
const isDisabled = ref(false);
|
||||
const isCustom = ref(false);
|
||||
|
||||
function toDone() {
|
||||
ui.showToast({
|
||||
message: "Done"
|
||||
});
|
||||
}
|
||||
</script>
|
||||
136
cool-unix/pages/demo/form/input.uvue
Normal file
136
cool-unix/pages/demo/form/input.uvue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-input></cl-input>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('数字输入')">
|
||||
<cl-input type="number"></cl-input>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('密码输入')">
|
||||
<cl-input password></cl-input>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('可清除')">
|
||||
<cl-input clearable :pt="{ className: 'mb-2' }"></cl-input>
|
||||
|
||||
<demo-tips>设置 hold-keyboard 属性后，清除内容时输入框将保持聚焦状态</demo-tips>
|
||||
|
||||
<cl-input clearable hold-keyboard></cl-input>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('左右插槽')">
|
||||
<cl-input
|
||||
:pt="{
|
||||
className: '!pr-1 mb-2'
|
||||
}"
|
||||
>
|
||||
<template #append>
|
||||
<cl-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="send-plane-fill"
|
||||
:pt="{
|
||||
className: 'ml-2'
|
||||
}"
|
||||
@tap="toAlert"
|
||||
></cl-button>
|
||||
</template>
|
||||
</cl-input>
|
||||
|
||||
<cl-input
|
||||
:pt="{
|
||||
className: '!pl-1'
|
||||
}"
|
||||
>
|
||||
<template #prepend>
|
||||
<cl-button
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="search-line"
|
||||
:pt="{
|
||||
className: 'mr-2'
|
||||
}"
|
||||
@tap="toAlert"
|
||||
></cl-button>
|
||||
</template>
|
||||
</cl-input>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-input
|
||||
v-model="content"
|
||||
:border="isBorder"
|
||||
:suffix-icon="isRightIcon ? 'text' : ''"
|
||||
:prefix-icon="isLeftIcon ? 'search-line' : ''"
|
||||
:disabled="isDisabled"
|
||||
:pt="{
|
||||
className: parseClass({
|
||||
'!bg-sky-100': isColor,
|
||||
'!border-sky-700': isColor
|
||||
}),
|
||||
inner: {
|
||||
className: parseClass({
|
||||
'!text-sky-700': isColor
|
||||
})
|
||||
},
|
||||
prefixIcon: {
|
||||
className: parseClass({
|
||||
'!text-sky-700': isColor
|
||||
})
|
||||
}
|
||||
}"
|
||||
></cl-input>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('边框')">
|
||||
<cl-switch v-model="isBorder"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('左图标')">
|
||||
<cl-switch v-model="isLeftIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('右图标')">
|
||||
<cl-switch v-model="isRightIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('其他颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import DemoTips from "../components/tips.uvue";
|
||||
import { parseClass } from "@/cool";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const content = ref("Cool Unix");
|
||||
|
||||
const isBorder = ref(true);
|
||||
const isLeftIcon = ref(true);
|
||||
const isRightIcon = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isColor = ref(false);
|
||||
|
||||
function toAlert() {
|
||||
ui.showToast({
|
||||
message: "Hello"
|
||||
});
|
||||
}
|
||||
</script>
|
||||
111
cool-unix/pages/demo/form/keyboard.uvue
Normal file
111
cool-unix/pages/demo/form/keyboard.uvue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('数字键盘')">
|
||||
<view class="mb-3 overflow-visible">
|
||||
<cl-input type="number" v-model="content"></cl-input>
|
||||
</view>
|
||||
|
||||
<cl-button @tap="openKeyboardNumber">{{ t("打开键盘") }}</cl-button>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('是否显示输入值')">
|
||||
<cl-switch v-model="isShowValue"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('输入即绑定')">
|
||||
<cl-switch v-model="isInputImmediate"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('身份证键盘')">
|
||||
<cl-switch v-model="isIdcard"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('密码键盘')">
|
||||
<cl-button @tap="openKeyboardPassword">{{ t("打开键盘") }}</cl-button>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('是否加密')">
|
||||
<cl-switch v-model="isEncrypt"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('车牌号键盘')">
|
||||
<view class="flex mb-3 justify-center flex-row overflow-visible">
|
||||
<cl-input-otp
|
||||
input-type="text"
|
||||
:length="8"
|
||||
:pt="{
|
||||
className: 'w-full',
|
||||
list: {
|
||||
className: 'justify-between'
|
||||
},
|
||||
item: {
|
||||
className: '!h-9 !w-9'
|
||||
},
|
||||
cursor: {
|
||||
className: '!h-3'
|
||||
}
|
||||
}"
|
||||
v-model="carNumber"
|
||||
></cl-input-otp>
|
||||
</view>
|
||||
|
||||
<cl-button @tap="openKeyboardCar">{{ t("打开键盘") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
|
||||
<cl-keyboard-number
|
||||
v-model="content"
|
||||
ref="keyboardNumberRef"
|
||||
:show-value="isShowValue"
|
||||
:input-immediate="isInputImmediate"
|
||||
:type="isIdcard ? 'idcard' : 'number'"
|
||||
></cl-keyboard-number>
|
||||
<cl-keyboard-car v-model="carNumber" ref="keyboardCarRef"></cl-keyboard-car>
|
||||
<cl-keyboard-password ref="keyboardPasswordRef" :encrypt="isEncrypt"></cl-keyboard-password>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const keyboardNumberRef = ref<ClKeyboardNumberComponentPublicInstance | null>(null);
|
||||
const isShowValue = ref(true);
|
||||
const isInputImmediate = ref(false);
|
||||
const isIdcard = ref(false);
|
||||
const content = ref("");
|
||||
|
||||
function openKeyboardNumber() {
|
||||
keyboardNumberRef.value!.open();
|
||||
}
|
||||
|
||||
const keyboardPasswordRef = ref<ClKeyboardPasswordComponentPublicInstance | null>(null);
|
||||
const isEncrypt = ref(false);
|
||||
|
||||
function openKeyboardPassword() {
|
||||
keyboardPasswordRef.value!.open();
|
||||
}
|
||||
|
||||
const keyboardCarRef = ref<ClKeyboardCarComponentPublicInstance | null>(null);
|
||||
const carNumber = ref("");
|
||||
|
||||
function openKeyboardCar() {
|
||||
keyboardCarRef.value!.open();
|
||||
}
|
||||
</script>
|
||||
146
cool-unix/pages/demo/form/radio.uvue
Normal file
146
cool-unix/pages/demo/form/radio.uvue
Normal file
@@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<view class="flex flex-row flex-wrap">
|
||||
<cl-radio
|
||||
v-model="checked2"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:pt="{
|
||||
className: 'mr-5'
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-radio>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('纵向排列')">
|
||||
<cl-radio
|
||||
v-model="checked"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'my-2',
|
||||
[
|
||||
isVerticalCustom,
|
||||
'justify-between border border-solid border-surface-200 rounded-lg p-2 !my-1'
|
||||
]
|
||||
])
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-radio>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-2'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('换个样式')">
|
||||
<cl-switch v-model="isVerticalCustom"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="mb-3 flex flex-row flex-wrap">
|
||||
<cl-radio
|
||||
v-model="checked3"
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:disabled="isDisabled"
|
||||
:show-icon="!isHideIcon"
|
||||
:active-icon="isIcon ? 'heart-fill' : 'checkbox-circle-line'"
|
||||
:inactive-icon="isIcon ? 'heart-line' : 'checkbox-blank-circle-line'"
|
||||
:pt="{
|
||||
className: parseClass([
|
||||
'mr-5',
|
||||
[isCustom, 'bg-surface-100 py-2 px-3 rounded-lg !mr-2 !mb-2'],
|
||||
{
|
||||
'!bg-surface-700': isDark && isCustom
|
||||
}
|
||||
]),
|
||||
icon: {
|
||||
className: parseClass([
|
||||
[isCustom && item.value == checked3, 'text-red-500']
|
||||
])
|
||||
},
|
||||
label: {
|
||||
className: parseClass([
|
||||
[isCustom && item.value == checked3, 'text-red-500']
|
||||
])
|
||||
}
|
||||
}"
|
||||
>
|
||||
{{ item.label }}
|
||||
</cl-radio>
|
||||
</view>
|
||||
|
||||
<cl-list border>
|
||||
<cl-list-item :label="t('换个图标')">
|
||||
<cl-switch v-model="isIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('不显示图标')">
|
||||
<cl-switch v-model="isHideIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></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 { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { parseClass } from "@/cool";
|
||||
import { useUi, type ClRadioOption } from "@/uni_modules/cool-ui";
|
||||
import { isDark } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const isIcon = ref(false);
|
||||
const isCustom = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isHideIcon = ref(false);
|
||||
const isVerticalCustom = ref(false);
|
||||
|
||||
const checked = ref("1");
|
||||
const checked2 = ref("2");
|
||||
const checked3 = ref("3");
|
||||
|
||||
const options = ref<ClRadioOption[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
62
cool-unix/pages/demo/form/rate.uvue
Normal file
62
cool-unix/pages/demo/form/rate.uvue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-rate v-model="num"></cl-rate>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-rate
|
||||
v-model="num2"
|
||||
:disabled="isDisabled"
|
||||
:show-score="isShowScore"
|
||||
:allow-half="isAllowHalf"
|
||||
:size="isSize ? 50 : 40"
|
||||
:void-icon="isIcon ? 'heart-fill' : 'star-fill'"
|
||||
:icon="isIcon ? 'heart-fill' : 'star-fill'"
|
||||
></cl-rate>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('只读')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示分数')">
|
||||
<cl-switch v-model="isShowScore"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('允许半星')">
|
||||
<cl-switch v-model="isAllowHalf"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('换个图标')">
|
||||
<cl-switch v-model="isIcon"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('大一点')">
|
||||
<cl-switch v-model="isSize"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const num = ref(1);
|
||||
const num2 = ref(3.5);
|
||||
const isDisabled = ref(false);
|
||||
const isShowScore = ref(true);
|
||||
const isAllowHalf = ref(true);
|
||||
const isSize = ref(false);
|
||||
const isIcon = ref(false);
|
||||
</script>
|
||||
286
cool-unix/pages/demo/form/select-date.uvue
Normal file
286
cool-unix/pages/demo/form/select-date.uvue
Normal file
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-select-date
|
||||
v-model="form.date1"
|
||||
type="date"
|
||||
@change="onDateChange"
|
||||
></cl-select-date>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('固定开始、结束日期')">
|
||||
<cl-select-date
|
||||
v-model="form.date3"
|
||||
start="2025-06-01"
|
||||
end="2027-08-01"
|
||||
type="date"
|
||||
></cl-select-date>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义触发器')">
|
||||
<view class="flex flex-row">
|
||||
<cl-button @tap="openSelect4">{{ t("打开选择器") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<cl-select-date
|
||||
ref="selectRef4"
|
||||
v-model="form.date4"
|
||||
type="date"
|
||||
:show-trigger="false"
|
||||
></cl-select-date>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('范围选择')">
|
||||
<cl-text :pt="{ className: 'mb-3' }">{{ form.date5 }}</cl-text>
|
||||
<cl-select-date v-model:values="form.date5" type="date" rangeable></cl-select-date>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义快捷选项')">
|
||||
<cl-select-date
|
||||
v-model:values="form.date6"
|
||||
type="date"
|
||||
rangeable
|
||||
:shortcuts="shortcuts"
|
||||
></cl-select-date>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-select-date
|
||||
v-model="form.date7"
|
||||
:type="type"
|
||||
:label-format="labelFormat"
|
||||
:disabled="isDisabled"
|
||||
></cl-select-date>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item label="YYYY">
|
||||
<cl-switch v-model="isYear"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item label="YYYY-MM">
|
||||
<cl-switch v-model="isMonth"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item
|
||||
label="YYYY-MM-DD"
|
||||
:pt="{
|
||||
label: {
|
||||
className: 'flex-[2]'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<cl-switch v-model="isDate"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item
|
||||
label="YYYY-MM-DD HH"
|
||||
:pt="{
|
||||
label: {
|
||||
className: 'flex-[2]'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<cl-switch v-model="isHour"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item
|
||||
label="YYYY-MM-DD HH:mm"
|
||||
:pt="{
|
||||
label: {
|
||||
className: 'flex-[2]'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<cl-switch v-model="isMinute"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item
|
||||
label="YYYY-MM-DD HH:mm:ss"
|
||||
:pt="{
|
||||
label: {
|
||||
className: 'flex-[2]'
|
||||
}
|
||||
}"
|
||||
>
|
||||
<cl-switch v-model="isSecond"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('标签格式化')">
|
||||
<cl-switch v-model="isFormat"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
import { useUi, type ClSelectDateShortcut } from "@/uni_modules/cool-ui";
|
||||
import { dayUts } from "@/cool";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
// 测试日期选择变化事件
|
||||
function onDateChange(value: string) {
|
||||
console.log("日期选择变化:", value);
|
||||
ui.showToast({
|
||||
message: `选择了日期: ${value}`,
|
||||
type: "success"
|
||||
});
|
||||
}
|
||||
|
||||
type Form = {
|
||||
date1: string;
|
||||
date2: string;
|
||||
date3: string;
|
||||
date4: string;
|
||||
date5: string[];
|
||||
date6: string[];
|
||||
date7: string;
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
date1: "2023-06-24",
|
||||
date2: "",
|
||||
date3: "",
|
||||
date4: "",
|
||||
date5: [],
|
||||
date6: [],
|
||||
date7: ""
|
||||
});
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const isYear = ref(false);
|
||||
const isMonth = ref(false);
|
||||
const isDate = ref(true);
|
||||
const isHour = ref(false);
|
||||
const isMinute = ref(false);
|
||||
const isSecond = ref(false);
|
||||
const isFormat = ref(false);
|
||||
|
||||
const type = computed(() => {
|
||||
if (isSecond.value) {
|
||||
return "second";
|
||||
}
|
||||
|
||||
if (isMinute.value) {
|
||||
return "minute";
|
||||
}
|
||||
|
||||
if (isHour.value) {
|
||||
return "hour";
|
||||
}
|
||||
|
||||
if (isDate.value) {
|
||||
return "date";
|
||||
}
|
||||
|
||||
if (isMonth.value) {
|
||||
return "month";
|
||||
}
|
||||
|
||||
if (isYear.value) {
|
||||
return "year";
|
||||
}
|
||||
|
||||
return "second";
|
||||
});
|
||||
|
||||
const labelFormat = computed(() => {
|
||||
if (isFormat.value) {
|
||||
if (isSecond.value) {
|
||||
return "YYYY年MM月DD日 HH时mm分ss秒";
|
||||
}
|
||||
|
||||
if (isMinute.value) {
|
||||
return "YYYY年MM月DD日 HH时mm分";
|
||||
}
|
||||
|
||||
if (isHour.value) {
|
||||
return "YYYY年MM月DD日 HH时";
|
||||
}
|
||||
|
||||
if (isDate.value) {
|
||||
return "YYYY年MM月DD日";
|
||||
}
|
||||
|
||||
if (isMonth.value) {
|
||||
return "YYYY年MM月";
|
||||
}
|
||||
|
||||
if (isYear.value) {
|
||||
return "YYYY年";
|
||||
}
|
||||
} else {
|
||||
if (isSecond.value) {
|
||||
return "YYYY-MM-DD HH:mm:ss";
|
||||
}
|
||||
|
||||
if (isMinute.value) {
|
||||
return "YYYY-MM-DD HH:mm";
|
||||
}
|
||||
|
||||
if (isHour.value) {
|
||||
return "YYYY-MM-DD HH";
|
||||
}
|
||||
|
||||
if (isDate.value) {
|
||||
return "YYYY-MM-DD";
|
||||
}
|
||||
|
||||
if (isMonth.value) {
|
||||
return "YYYY-MM";
|
||||
}
|
||||
|
||||
if (isYear.value) {
|
||||
return "YYYY";
|
||||
}
|
||||
}
|
||||
|
||||
return "YYYY-MM-DD HH:mm:ss";
|
||||
});
|
||||
|
||||
const selectRef4 = ref<ClSelectDateComponentPublicInstance | null>(null);
|
||||
|
||||
function openSelect4() {
|
||||
selectRef4.value!.open((value) => {
|
||||
ui.showToast({
|
||||
message: `你选择了：${value}`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const shortcuts = ref<ClSelectDateShortcut[]>([
|
||||
{
|
||||
label: "昨日",
|
||||
value: [dayUts().subtract(1, "day").format("YYYY-MM-DD"), dayUts().format("YYYY-MM-DD")]
|
||||
},
|
||||
{
|
||||
label: "本周",
|
||||
value: [
|
||||
dayUts().startOf("week").add(1, "day").format("YYYY-MM-DD"),
|
||||
dayUts().endOf("week").add(1, "day").format("YYYY-MM-DD")
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "本月",
|
||||
value: [
|
||||
dayUts().startOf("month").format("YYYY-MM-DD"),
|
||||
dayUts().endOf("month").format("YYYY-MM-DD")
|
||||
]
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
123
cool-unix/pages/demo/form/select-time.uvue
Normal file
123
cool-unix/pages/demo/form/select-time.uvue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-select-time v-model="form.time1"></cl-select-time>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义触发器')">
|
||||
<view class="flex flex-row">
|
||||
<cl-button @tap="openSelect2">{{ t("打开选择器") }} </cl-button>
|
||||
</view>
|
||||
|
||||
<cl-select-time
|
||||
ref="selectRef2"
|
||||
v-model="form.time2"
|
||||
:show-trigger="false"
|
||||
></cl-select-time>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-select-time
|
||||
v-model="form.time3"
|
||||
:disabled="isDisabled"
|
||||
:label-format="labelFormat"
|
||||
:type="type"
|
||||
></cl-select-time>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('时')">
|
||||
<cl-switch v-model="isHour"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('时:分')">
|
||||
<cl-switch v-model="isMinute"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('时:分:秒')">
|
||||
<cl-switch v-model="isSecond"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('标签格式化')">
|
||||
<cl-switch v-model="isFormat"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, reactive, ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
type Form = {
|
||||
time1: string;
|
||||
time2: string;
|
||||
time3: string;
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
time1: "",
|
||||
time2: "",
|
||||
time3: ""
|
||||
});
|
||||
|
||||
const isDisabled = ref(false);
|
||||
const isFormat = ref(false);
|
||||
const isHour = ref(false);
|
||||
const isMinute = ref(false);
|
||||
const isSecond = ref(true);
|
||||
|
||||
const selectRef2 = ref<ClSelectTimeComponentPublicInstance | null>(null);
|
||||
|
||||
function openSelect2() {
|
||||
selectRef2.value!.open((value) => {
|
||||
ui.showToast({
|
||||
message: `你选择了：${value}`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const type = computed(() => {
|
||||
if (isHour.value) {
|
||||
return "hour";
|
||||
}
|
||||
|
||||
if (isMinute.value) {
|
||||
return "minute";
|
||||
}
|
||||
|
||||
return "second";
|
||||
});
|
||||
|
||||
const labelFormat = computed(() => {
|
||||
if (isFormat.value) {
|
||||
switch (type.value) {
|
||||
case "hour":
|
||||
return "{H}时";
|
||||
case "minute":
|
||||
return "{H}时{m}分";
|
||||
case "second":
|
||||
return "{H}时{m}分{s}秒";
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
388
cool-unix/pages/demo/form/select.uvue
Normal file
388
cool-unix/pages/demo/form/select.uvue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-select v-model="form.selected" :options="options"></cl-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义触发器')">
|
||||
<view class="flex flex-row">
|
||||
<cl-button @tap="openSelect2">{{ t("打开选择器") }}</cl-button>
|
||||
</view>
|
||||
|
||||
<cl-select
|
||||
ref="selectRef2"
|
||||
v-model="form.selected2"
|
||||
:options="options2"
|
||||
:show-trigger="false"
|
||||
></cl-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多列')">
|
||||
<demo-tips>
|
||||
{{ t("通过 children 配置多级数据，并使用 column-count 参数指定显示的列数") }}
|
||||
</demo-tips>
|
||||
|
||||
<cl-select
|
||||
v-model="form.selected3"
|
||||
:options="options3"
|
||||
:column-count="3"
|
||||
></cl-select>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('弹窗中使用')">
|
||||
<cl-button @tap="visible3 = true">{{ t("打开") }}</cl-button>
|
||||
|
||||
<cl-popup v-model="visible3" direction="center" size="80%" :title="t('选择地区')">
|
||||
<view class="p-3 pt-0">
|
||||
<demo-tips>
|
||||
H5 和 APP 端通过 teleport 实现弹窗内的选择器使用，小程序端则通过
|
||||
root-portal 实现。
|
||||
</demo-tips>
|
||||
|
||||
<cl-select
|
||||
v-model="form.selected3"
|
||||
:options="options3"
|
||||
:column-count="3"
|
||||
></cl-select>
|
||||
</view>
|
||||
</cl-popup>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'mb-3 text-sm p-3 bg-surface-100 dark:!bg-surface-700 rounded-lg'
|
||||
}"
|
||||
v-if="form.selected4 != null && isShowValue"
|
||||
>
|
||||
{{ t("绑定值") }}：{{ form.selected4 }}
|
||||
</cl-text>
|
||||
|
||||
<cl-select
|
||||
v-model="form.selected4"
|
||||
:options="options"
|
||||
:disabled="isDisabled"
|
||||
:show-cancel="isShowCancel"
|
||||
:confirm-text="isButtonText ? t('下一步') : t('确定')"
|
||||
:cancel-text="isButtonText ? t('关闭') : t('取消')"
|
||||
></cl-select>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('显示取消按钮')">
|
||||
<cl-switch v-model="isShowCancel"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('修改按钮文案')">
|
||||
<cl-switch v-model="isButtonText"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示绑定值')">
|
||||
<cl-switch v-model="isShowValue"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('空数据')">
|
||||
<cl-select v-model="form.selected" :options="options4"></cl-select>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import DemoTips from "../components/tips.uvue";
|
||||
import { useUi, type ClSelectOption } from "@/uni_modules/cool-ui";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const selectRef2 = ref<ClSelectComponentPublicInstance | null>(null);
|
||||
|
||||
const isShowCancel = ref(true);
|
||||
const isButtonText = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isShowValue = ref(false);
|
||||
|
||||
type Form = {
|
||||
selected: number | null; // 参数 clear 需要指定类型带有 null
|
||||
selected2: string;
|
||||
selected3: number[];
|
||||
selected4: number | null;
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
selected: null,
|
||||
selected2: "2",
|
||||
selected3: [],
|
||||
selected4: 3
|
||||
});
|
||||
|
||||
const options = ref<ClSelectOption[]>([
|
||||
{
|
||||
label: "HTML",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "CSS",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "JavaScript",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "Node",
|
||||
value: 4
|
||||
},
|
||||
{
|
||||
label: "Vite",
|
||||
value: 5
|
||||
},
|
||||
{
|
||||
label: "Webpack",
|
||||
value: 6
|
||||
}
|
||||
]);
|
||||
|
||||
const options2 = ref<ClSelectOption[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
}
|
||||
]);
|
||||
|
||||
const options3 = ref<ClSelectOption[]>([
|
||||
{
|
||||
label: "福建省",
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "福州市",
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "鼓楼区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "台江区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "仓山区",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "马尾区",
|
||||
value: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "厦门市",
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: "思明区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "湖里区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "集美区",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "海沧区",
|
||||
value: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "泉州市",
|
||||
value: 3,
|
||||
children: [
|
||||
{
|
||||
label: "鲤城区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "丰泽区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "洛江区",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "泉港区",
|
||||
value: 4
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "浙江省",
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: "杭州市",
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "上城区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "下城区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "江干区",
|
||||
value: 3
|
||||
},
|
||||
{
|
||||
label: "拱墅区",
|
||||
value: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "宁波市",
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: "海曙区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "江北区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "北仑区",
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "湖南省",
|
||||
value: 3,
|
||||
children: [
|
||||
{
|
||||
label: "长沙市",
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "芙蓉区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "天心区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "岳麓区",
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "株洲市",
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: "荷塘区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "芦淞区",
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "江西省",
|
||||
value: 4,
|
||||
children: [
|
||||
{
|
||||
label: "南昌市",
|
||||
value: 1,
|
||||
children: [
|
||||
{
|
||||
label: "东湖区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "西湖区",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "青云谱区",
|
||||
value: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "九江市",
|
||||
value: 2,
|
||||
children: [
|
||||
{
|
||||
label: "浔阳区",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "濂溪区",
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]);
|
||||
|
||||
const options4 = ref<ClSelectOption[]>([]);
|
||||
|
||||
function openSelect2() {
|
||||
selectRef2.value!.open((value) => {
|
||||
const d = options2.value.find((item) => item.value == value);
|
||||
|
||||
ui.showToast({
|
||||
message: `你选择了 ${value} : ${d?.label}`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const visible3 = ref(false);
|
||||
</script>
|
||||
86
cool-unix/pages/demo/form/slider.uvue
Normal file
86
cool-unix/pages/demo/form/slider.uvue
Normal file
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-slider v-model="num"></cl-slider>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('范围选择')">
|
||||
<cl-text
|
||||
:pt="{
|
||||
className: 'mb-3'
|
||||
}"
|
||||
>{{ num2[0] }} ～ {{ num2[1] }}</cl-text
|
||||
>
|
||||
<cl-slider v-model:values="num2" range></cl-slider>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-slider
|
||||
v-model="num3"
|
||||
:disabled="isDisabled"
|
||||
:show-value="isShowValue"
|
||||
:block-size="isSize ? 50 : 40"
|
||||
:track-height="isSize ? 12 : 8"
|
||||
:step="isStep ? 10 : 1"
|
||||
:max="isMax ? 50 : 100"
|
||||
:pt="{
|
||||
thumb: {
|
||||
className: isColor ? '!bg-red-500' : ''
|
||||
},
|
||||
progress: {
|
||||
className: isColor ? '!bg-red-200' : ''
|
||||
}
|
||||
}"
|
||||
></cl-slider>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('显示值')">
|
||||
<cl-switch v-model="isShowValue"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('步长10')">
|
||||
<cl-switch v-model="isStep"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('滑块大点')">
|
||||
<cl-switch v-model="isSize"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('换个颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('最大50')">
|
||||
<cl-switch v-model="isMax"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const num = ref(60);
|
||||
const num2 = ref<number[]>([10, 20]);
|
||||
const num3 = ref(35);
|
||||
const isDisabled = ref(false);
|
||||
const isShowValue = ref(true);
|
||||
const isStep = ref(false);
|
||||
const isSize = ref(false);
|
||||
const isMax = ref(false);
|
||||
const isColor = ref(false);
|
||||
</script>
|
||||
92
cool-unix/pages/demo/form/switch.uvue
Normal file
92
cool-unix/pages/demo/form/switch.uvue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-switch v-model="checked"></cl-switch>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义颜色')">
|
||||
<view class="flex flex-row">
|
||||
<cl-switch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
className: 'mr-5',
|
||||
track: {
|
||||
className: '!bg-red-100'
|
||||
},
|
||||
thumb: {
|
||||
className: '!bg-red-500'
|
||||
}
|
||||
}"
|
||||
></cl-switch>
|
||||
|
||||
<cl-switch
|
||||
v-model="checked"
|
||||
:pt="{
|
||||
track: {
|
||||
className: '!bg-purple-100'
|
||||
},
|
||||
thumb: {
|
||||
className: '!bg-purple-500'
|
||||
}
|
||||
}"
|
||||
></cl-switch>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-switch
|
||||
v-model="checked"
|
||||
:loading="isLoading"
|
||||
:disabled="isDisabled"
|
||||
:height="isSize ? 60 : 48"
|
||||
:width="isSize ? 100 : 80"
|
||||
:pt="{
|
||||
track: {
|
||||
className: parseClass([[isCustom, '!rounded-md']])
|
||||
},
|
||||
thumb: {
|
||||
className: parseClass([[isCustom, '!rounded-md']])
|
||||
}
|
||||
}"
|
||||
></cl-switch>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-3'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('加载中')">
|
||||
<cl-switch v-model="isLoading"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('大一点')">
|
||||
<cl-switch v-model="isSize"></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 { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const checked = ref(false);
|
||||
const isDisabled = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isSize = ref(false);
|
||||
const isCustom = ref(false);
|
||||
</script>
|
||||
67
cool-unix/pages/demo/form/textarea.uvue
Normal file
67
cool-unix/pages/demo/form/textarea.uvue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-textarea></cl-textarea>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-textarea
|
||||
v-model="content"
|
||||
:border="isBorder"
|
||||
:disabled="isDisabled"
|
||||
:show-word-limit="isShowCount"
|
||||
:auto-height="isAutoHeight"
|
||||
:pt="{
|
||||
className: parseClass({
|
||||
'!bg-sky-100': isColor,
|
||||
'!border-sky-700': isColor
|
||||
}),
|
||||
inner: {
|
||||
className: parseClass({
|
||||
'text-sky-700': isColor
|
||||
})
|
||||
}
|
||||
}"
|
||||
></cl-textarea>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('边框')">
|
||||
<cl-switch v-model="isBorder"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示字数')">
|
||||
<cl-switch v-model="isShowCount"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('自动增高')">
|
||||
<cl-switch v-model="isAutoHeight"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('其他颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { parseClass } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const content = ref("Cool Unix");
|
||||
|
||||
const isBorder = ref(true);
|
||||
const isShowCount = ref(true);
|
||||
const isDisabled = ref(false);
|
||||
const isColor = ref(false);
|
||||
const isAutoHeight = ref(false);
|
||||
</script>
|
||||
50
cool-unix/pages/demo/form/upload.uvue
Normal file
50
cool-unix/pages/demo/form/upload.uvue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-upload v-model="form.upload1" test></cl-upload>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('禁用')">
|
||||
<cl-upload v-model="form.upload1" disabled test></cl-upload>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义图标、文字、大小')">
|
||||
<cl-upload
|
||||
v-model="form.upload1"
|
||||
icon="id-card-line"
|
||||
:text="t('上传证件照')"
|
||||
:width="300"
|
||||
:height="200"
|
||||
test
|
||||
></cl-upload>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多选')">
|
||||
<cl-upload multiple v-model="form.upload2" test></cl-upload>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('限制 3 个')">
|
||||
<cl-upload multiple :limit="3" v-model="form.upload3" test></cl-upload>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { reactive } from "vue";
|
||||
|
||||
type Form = {
|
||||
upload1: string;
|
||||
upload2: string[];
|
||||
upload3: string[];
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
upload1: "",
|
||||
upload2: [],
|
||||
upload3: []
|
||||
});
|
||||
</script>
|
||||
45
cool-unix/pages/demo/layout/collapse.uvue
Normal file
45
cool-unix/pages/demo/layout/collapse.uvue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-button @click="toggle">{{ visible ? t("点击收起") : t("点击展开") }}</cl-button>
|
||||
|
||||
<cl-collapse v-model="visible">
|
||||
<cl-text
|
||||
>云想衣裳花想容，春风拂槛露华浓，若非群玉山头见，会向瑶台月下逢。</cl-text
|
||||
>
|
||||
</cl-collapse>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('ref 方式调用')">
|
||||
<cl-button @click="refToggle">{{ t("点击展开") }}</cl-button>
|
||||
|
||||
<cl-collapse ref="collapseRef">
|
||||
<view class="bg-surface-100 p-3 rounded-xl dark:!bg-surface-700">
|
||||
<cl-text
|
||||
>云想衣裳花想容，春风拂槛露华浓，若非群玉山头见，会向瑶台月下逢。</cl-text
|
||||
>
|
||||
</view>
|
||||
</cl-collapse>
|
||||
</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 visible = ref(false);
|
||||
|
||||
function toggle() {
|
||||
visible.value = !visible.value;
|
||||
}
|
||||
|
||||
const collapseRef = ref<ClCollapseComponentPublicInstance | null>(null);
|
||||
|
||||
function refToggle() {
|
||||
collapseRef.value!.toggle();
|
||||
}
|
||||
</script>
|
||||
183
cool-unix/pages/demo/layout/flex.uvue
Normal file
183
cool-unix/pages/demo/layout/flex.uvue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view
|
||||
class="p-3"
|
||||
:class="{
|
||||
'is-dark': isDark
|
||||
}"
|
||||
>
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-row :gutter="12">
|
||||
<cl-col :span="8">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="8">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="8">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">3</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
|
||||
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
|
||||
<cl-col :span="12">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="12">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
|
||||
<cl-row :gutter="12" :pt="{ className: 'mt-3' }">
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">3</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">4</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('左间隔')">
|
||||
<cl-row :gutter="12">
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6" :offset="6">
|
||||
<view class="item active">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">3</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('右移动')">
|
||||
<cl-row :gutter="12">
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6" :push="6">
|
||||
<view class="item active">
|
||||
<cl-text :pt="{ className: 'text' }">3</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('左移动')">
|
||||
<cl-row :gutter="12">
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">1</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">2</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6">
|
||||
<view class="item">
|
||||
<cl-text :pt="{ className: 'text' }">3</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
<cl-col :span="6" :pull="6">
|
||||
<view class="item active">
|
||||
<cl-text :pt="{ className: 'text' }">4</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('多个数据')">
|
||||
<cl-row :gutter="12">
|
||||
<cl-col :span="4" v-for="item in 20" :key="item">
|
||||
<view class="item mb-2">
|
||||
<cl-text :pt="{ className: 'text' }">{{ item }}</cl-text>
|
||||
</view>
|
||||
</cl-col>
|
||||
</cl-row>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { isDark } from "@/cool";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
@apply h-8 bg-surface-100 rounded-md flex flex-row items-center justify-center;
|
||||
|
||||
.text {
|
||||
@apply text-sm text-surface-700;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply bg-primary-500;
|
||||
|
||||
.text {
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
.item {
|
||||
@apply bg-surface-700;
|
||||
|
||||
.text {
|
||||
@apply text-surface-100;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@apply bg-primary-500;
|
||||
|
||||
.text {
|
||||
@apply text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
cool-unix/pages/demo/layout/float-view.uvue
Normal file
50
cool-unix/pages/demo/layout/float-view.uvue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item>
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-icon name="notification-4-fill" class="mr-2"></cl-icon>
|
||||
<cl-text>{{ t("禁用状态，无法拖拽") }}</cl-text>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item>
|
||||
<view class="flex flex-row items-center">
|
||||
<cl-icon name="heart-fill" class="mr-2"></cl-icon>
|
||||
<cl-text>{{ t("不吸附边缘，任意位置可拖拽") }}</cl-text>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<cl-float-view :left="200" :bottom="50" :no-snapping="true">
|
||||
<view
|
||||
class="w-[40px] h-[40px] bg-primary-500 flex flex-row items-center justify-center"
|
||||
@tap="toAlert"
|
||||
>
|
||||
<cl-icon name="heart-fill" color="white"></cl-icon>
|
||||
</view>
|
||||
</cl-float-view>
|
||||
|
||||
<cl-float-view disabled :left="20" :bottom="400" :gap="10">
|
||||
<view
|
||||
class="w-[40px] h-[40px] bg-surface-400 rounded-full flex flex-row items-center justify-center"
|
||||
>
|
||||
<cl-icon name="notification-4-fill" color="white"></cl-icon>
|
||||
</view>
|
||||
</cl-float-view>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
function toAlert() {
|
||||
ui.showToast({
|
||||
message: t("这是一个提示")
|
||||
});
|
||||
}
|
||||
</script>
|
||||
63
cool-unix/pages/demo/layout/footer.uvue
Normal file
63
cool-unix/pages/demo/layout/footer.uvue
Normal file
@@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item>
|
||||
<cl-text>解决底部按钮隐藏时页面底部仍有空白间距</cl-text>
|
||||
<cl-text>解决固定定位时内容占位缺失</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<cl-list>
|
||||
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
|
||||
</cl-list>
|
||||
</view>
|
||||
|
||||
<cl-footer :vt="cache.key">
|
||||
<template v-if="status == 0">
|
||||
<view class="flex flex-row">
|
||||
<cl-button :pt="{ className: 'flex-1' }" text border size="large" @tap="cancel">
|
||||
{{ t("取消订单") }}
|
||||
</cl-button>
|
||||
|
||||
<cl-button :pt="{ className: 'flex-1' }" type="primary" size="large" @tap="buy">
|
||||
{{ t("立即购买") }}
|
||||
</cl-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<cl-button type="error" size="large" @tap="confirm" v-if="status == 1">
|
||||
{{ t("确认收货") }}
|
||||
</cl-button>
|
||||
|
||||
<cl-button type="success" size="large" @tap="comment" v-if="status == 2">
|
||||
{{ t("评价") }}
|
||||
</cl-button>
|
||||
</cl-footer>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useCache } from "@/cool";
|
||||
import { t } from "@/locale";
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
|
||||
const status = ref(0);
|
||||
|
||||
const { cache } = useCache(() => [status.value]);
|
||||
|
||||
function cancel() {
|
||||
status.value = 3;
|
||||
}
|
||||
|
||||
function buy() {
|
||||
status.value = 1;
|
||||
}
|
||||
|
||||
function confirm() {
|
||||
status.value = 2;
|
||||
}
|
||||
|
||||
function comment() {
|
||||
status.value = 3;
|
||||
}
|
||||
</script>
|
||||
44
cool-unix/pages/demo/layout/sticky.uvue
Normal file
44
cool-unix/pages/demo/layout/sticky.uvue
Normal file
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<cl-page back-top>
|
||||
<cl-sticky>
|
||||
<view class="bg-primary-500 p-3 h-[40px] flex flex-row items-center">
|
||||
<cl-text color="white">Header - 1</cl-text>
|
||||
</view>
|
||||
</cl-sticky>
|
||||
|
||||
<view class="p-3">
|
||||
<cl-list>
|
||||
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
|
||||
</cl-list>
|
||||
</view>
|
||||
|
||||
<cl-sticky :offset-top="40">
|
||||
<view class="bg-red-500 p-3 h-[40px] flex flex-row items-center">
|
||||
<cl-text color="white">Header - 2</cl-text>
|
||||
</view>
|
||||
</cl-sticky>
|
||||
|
||||
<view class="p-3">
|
||||
<cl-list>
|
||||
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
|
||||
</cl-list>
|
||||
</view>
|
||||
|
||||
<cl-sticky :offset-top="80">
|
||||
<view class="bg-purple-500 p-3 h-[40px] flex flex-row items-center">
|
||||
<cl-text color="white">Header - 3</cl-text>
|
||||
</view>
|
||||
</cl-sticky>
|
||||
|
||||
<view class="p-3">
|
||||
<cl-list>
|
||||
<cl-list-item :label="`${i}`" v-for="i in 50" :key="i"> </cl-list-item>
|
||||
</cl-list>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
170
cool-unix/pages/demo/layout/tabs.uvue
Normal file
170
cool-unix/pages/demo/layout/tabs.uvue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-tabs v-model="form.val1" :list="list"></cl-tabs>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('显示滑块')">
|
||||
<cl-tabs
|
||||
v-model="form.val2"
|
||||
:list="list"
|
||||
show-slider
|
||||
:pt="{ className: isPad ? '!p-2' : '' }"
|
||||
></cl-tabs>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-3' }">
|
||||
<cl-list-item :label="t('添加间距')">
|
||||
<cl-switch v-model="isPad"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('横向填充')">
|
||||
<demo-tips>{{ t("适用于标签数量不多的情况") }}</demo-tips>
|
||||
|
||||
<cl-tabs v-model="form.val3" :list="list2" fill></cl-tabs>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('居中')">
|
||||
<view class="flex flex-row justify-center">
|
||||
<cl-tabs v-model="form.val4" :list="list2"></cl-tabs>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('单个禁用')">
|
||||
<cl-tabs v-model="form.val5" :list="list3"></cl-tabs>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-tabs
|
||||
v-model="form.val6"
|
||||
:list="list"
|
||||
:show-line="isShowLine"
|
||||
:disabled="isDisabled"
|
||||
:color="isColor ? 'red' : ''"
|
||||
:un-color="isColor ? '#ccc' : ''"
|
||||
></cl-tabs>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-3' }">
|
||||
<cl-list-item :label="t('显示下划线')">
|
||||
<cl-switch v-model="isShowLine"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('禁用')">
|
||||
<cl-switch v-model="isDisabled"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('自定义颜色')">
|
||||
<cl-switch v-model="isColor"></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 DemoTips from "../components/tips.uvue";
|
||||
import { reactive, ref } from "vue";
|
||||
import type { ClTabsItem } from "@/uni_modules/cool-ui";
|
||||
|
||||
type Form = {
|
||||
val1: string;
|
||||
val2: string;
|
||||
val3: string;
|
||||
val4: string;
|
||||
val5: string;
|
||||
val6: string;
|
||||
};
|
||||
|
||||
const form = reactive<Form>({
|
||||
val1: "1",
|
||||
val2: "2",
|
||||
val3: "1",
|
||||
val4: "1",
|
||||
val5: "2",
|
||||
val6: "1"
|
||||
});
|
||||
|
||||
const list = ref<ClTabsItem[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
},
|
||||
{
|
||||
label: "Jquery",
|
||||
value: "5"
|
||||
},
|
||||
{
|
||||
label: "Vuex",
|
||||
value: "6"
|
||||
},
|
||||
{
|
||||
label: "Vue Router",
|
||||
value: "7"
|
||||
},
|
||||
{
|
||||
label: "Pinia",
|
||||
value: "8"
|
||||
}
|
||||
]);
|
||||
|
||||
const list2 = ref<ClTabsItem[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
}
|
||||
]);
|
||||
|
||||
const list3 = ref<ClTabsItem[]>([
|
||||
{
|
||||
label: "Vue",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "React",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "Angular",
|
||||
value: "3",
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: "Svelte",
|
||||
value: "4"
|
||||
}
|
||||
]);
|
||||
|
||||
const isShowLine = ref(true);
|
||||
const isDisabled = ref(false);
|
||||
const isColor = ref(false);
|
||||
const isPad = ref(false);
|
||||
</script>
|
||||
97
cool-unix/pages/demo/layout/topbar.uvue
Normal file
97
cool-unix/pages/demo/layout/topbar.uvue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-topbar :title="t('标题')"> </cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('插槽')">
|
||||
<cl-topbar :title="t('标题')">
|
||||
<template #prepend>
|
||||
<cl-icon
|
||||
name="heart-fill"
|
||||
:size="38"
|
||||
:pt="{
|
||||
className: 'ml-2'
|
||||
}"
|
||||
></cl-icon>
|
||||
</template>
|
||||
|
||||
<template #append>
|
||||
<cl-icon name="search-line" :size="38"></cl-icon>
|
||||
</template>
|
||||
</cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义颜色')">
|
||||
<cl-topbar :title="t('标题')" color="white" background-color="#409EFF"> </cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('使用 PT 自定义颜色')">
|
||||
<cl-topbar
|
||||
:title="t('标题')"
|
||||
:pt="{
|
||||
className: 'bg-surface-800',
|
||||
title: {
|
||||
className: 'text-white'
|
||||
},
|
||||
back: {
|
||||
className: 'text-white'
|
||||
}
|
||||
}"
|
||||
>
|
||||
</cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义返回图标')">
|
||||
<cl-topbar
|
||||
:title="t('标题')"
|
||||
back-icon="home-2-line"
|
||||
:pt="{
|
||||
back: {
|
||||
size: 38
|
||||
}
|
||||
}"
|
||||
>
|
||||
</cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('禁用返回按钮')">
|
||||
<cl-topbar :title="t('标题')" :backable="false"> </cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义返回路径')">
|
||||
<cl-topbar :title="t('标题')" back-path="/pages/user/login">
|
||||
<template #prepend>
|
||||
<cl-text>{{ t("登录") }}</cl-text>
|
||||
</template>
|
||||
</cl-topbar>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义标题内容')">
|
||||
<cl-topbar>
|
||||
<cl-tabs v-model="type" :height="66" :list="typeList"></cl-tabs>
|
||||
</cl-topbar>
|
||||
</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 type { ClTabsItem } from "@/uni_modules/cool-ui";
|
||||
|
||||
const type = ref("fans");
|
||||
const typeList = ref<ClTabsItem[]>([
|
||||
{
|
||||
label: "我的粉丝",
|
||||
value: "fans"
|
||||
},
|
||||
{
|
||||
label: "我的关注",
|
||||
value: "follow"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
283
cool-unix/pages/demo/other/animation.uvue
Normal file
283
cool-unix/pages/demo/other/animation.uvue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础动画')">
|
||||
<view class="row">
|
||||
<view class="item" ref="rotateRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">rotate</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="scaleRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">scale</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="moveRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">move</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="opacityRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">opacity</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('淡入淡出')">
|
||||
<view class="row">
|
||||
<view class="item" ref="fadeInRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">fadeIn</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="fadeOutRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">fadeOut</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onFadeToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('滑入')">
|
||||
<view class="row">
|
||||
<view class="item" ref="slideLeftRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">slideLeft</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="slideRightRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">slideRight</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="slideUpRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">slideUp</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="slideDownRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">slideDown</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onSlideInToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item label="缩放">
|
||||
<view class="row">
|
||||
<view class="item" ref="zoomInRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">zoomIn</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="zoomOutRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">zoomOut</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onZoomToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('旋转翻转')">
|
||||
<view class="row">
|
||||
<view class="item" ref="rotateInRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">rotateIn</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="flipXRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">flipX</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="flipYRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">flipY</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onRotateFlipToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('摇摆抖动')">
|
||||
<view class="row">
|
||||
<view class="item" ref="shakeRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">shake</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="swingRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">swing</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="wobbleRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">wobble</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onShakeToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('特殊效果')">
|
||||
<view class="row">
|
||||
<view class="item" ref="rollInRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">rollIn</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="lightSpeedRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">lightSpeed</cl-text>
|
||||
</view>
|
||||
<view class="item" ref="rippleRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">ripple</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onSpecialToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('组合动画')">
|
||||
<view class="row">
|
||||
<view class="item" ref="sequenceRef">
|
||||
<cl-text color="white" :pt="{ className: 'text-sm' }">sequence</cl-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<cl-button text border @tap="onSequenceToggle">{{ t("播放动画") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { AnimationEngine, createAnimation } from "@/cool";
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
// 基础动画引用
|
||||
const rotateRef = ref<UniElement | null>(null);
|
||||
const moveRef = ref<UniElement | null>(null);
|
||||
const scaleRef = ref<UniElement | null>(null);
|
||||
const opacityRef = ref<UniElement | null>(null);
|
||||
|
||||
// 淡入淡出动画引用
|
||||
const fadeInRef = ref<UniElement | null>(null);
|
||||
const fadeOutRef = ref<UniElement | null>(null);
|
||||
|
||||
// 滑入动画引用
|
||||
const slideLeftRef = ref<UniElement | null>(null);
|
||||
const slideRightRef = ref<UniElement | null>(null);
|
||||
const slideUpRef = ref<UniElement | null>(null);
|
||||
const slideDownRef = ref<UniElement | null>(null);
|
||||
|
||||
// 缩放动画引用
|
||||
const zoomInRef = ref<UniElement | null>(null);
|
||||
const zoomOutRef = ref<UniElement | null>(null);
|
||||
|
||||
// 旋转翻转动画引用
|
||||
const rotateInRef = ref<UniElement | null>(null);
|
||||
const flipXRef = ref<UniElement | null>(null);
|
||||
const flipYRef = ref<UniElement | null>(null);
|
||||
|
||||
// 摇摆抖动动画引用
|
||||
const shakeRef = ref<UniElement | null>(null);
|
||||
const swingRef = ref<UniElement | null>(null);
|
||||
const wobbleRef = ref<UniElement | null>(null);
|
||||
|
||||
// 特殊效果动画引用
|
||||
const rollInRef = ref<UniElement | null>(null);
|
||||
const lightSpeedRef = ref<UniElement | null>(null);
|
||||
const rippleRef = ref<UniElement | null>(null);
|
||||
|
||||
// 组合动画引用
|
||||
const sequenceRef = ref<UniElement | null>(null);
|
||||
|
||||
// 基础动画方法
|
||||
function onRotate() {
|
||||
createAnimation(rotateRef.value, {
|
||||
duration: 1000,
|
||||
loop: -1
|
||||
})
|
||||
.rotate("0deg", "360deg")
|
||||
.play();
|
||||
}
|
||||
|
||||
function onMove() {
|
||||
createAnimation(moveRef.value, {
|
||||
duration: 1000,
|
||||
loop: -1,
|
||||
alternate: true
|
||||
})
|
||||
.translateX("0rpx", "300rpx")
|
||||
.play();
|
||||
}
|
||||
|
||||
function onScale() {
|
||||
createAnimation(scaleRef.value, {
|
||||
duration: 500,
|
||||
loop: -1,
|
||||
alternate: true
|
||||
})
|
||||
.scale("1", "1.2")
|
||||
.play();
|
||||
}
|
||||
|
||||
function onOpacity() {
|
||||
createAnimation(opacityRef.value, {
|
||||
duration: 500,
|
||||
loop: -1,
|
||||
alternate: true
|
||||
})
|
||||
.opacity("1", "0.5")
|
||||
.play();
|
||||
}
|
||||
|
||||
// 淡入淡出动画方法
|
||||
function onFadeToggle() {
|
||||
createAnimation(fadeInRef.value).fadeIn(500).play();
|
||||
createAnimation(fadeOutRef.value).fadeOut(500).play();
|
||||
}
|
||||
|
||||
// 滑入动画方法
|
||||
function onSlideInToggle() {
|
||||
createAnimation(slideLeftRef.value).slideInLeft(400).play();
|
||||
createAnimation(slideRightRef.value).slideInRight(400).play();
|
||||
createAnimation(slideUpRef.value).slideInUp(400).play();
|
||||
createAnimation(slideDownRef.value).slideInDown(400).play();
|
||||
}
|
||||
|
||||
// 缩放动画方法
|
||||
function onZoomToggle() {
|
||||
createAnimation(zoomInRef.value).zoomIn(400).play();
|
||||
createAnimation(zoomOutRef.value).zoomOut(400).play();
|
||||
}
|
||||
|
||||
// 旋转翻转动画方法
|
||||
function onRotateFlipToggle() {
|
||||
createAnimation(rotateInRef.value).rotateIn(600).play();
|
||||
createAnimation(flipXRef.value).flipX(600).play();
|
||||
createAnimation(flipYRef.value).flipY(600).play();
|
||||
}
|
||||
|
||||
// 摇摆抖动动画方法
|
||||
function onShakeToggle() {
|
||||
createAnimation(shakeRef.value).shake(200).play();
|
||||
createAnimation(swingRef.value).swing(200).play();
|
||||
createAnimation(wobbleRef.value).wobble(200).play();
|
||||
}
|
||||
|
||||
// 特殊效果动画方法
|
||||
function onSpecialToggle() {
|
||||
createAnimation(rollInRef.value).rollIn(600).play();
|
||||
createAnimation(lightSpeedRef.value).lightSpeed(500).play();
|
||||
createAnimation(rippleRef.value).ripple(600).play();
|
||||
}
|
||||
|
||||
// 异步序列动画方法
|
||||
async function onSequenceToggle() {
|
||||
createAnimation(sequenceRef.value)
|
||||
.sequence([
|
||||
(engine: AnimationEngine) => engine.fadeIn(300),
|
||||
(engine: AnimationEngine) => engine.scale("1", "1.5").setDuration(400),
|
||||
(engine: AnimationEngine) => engine.rotate("0deg", "360deg").setDuration(500),
|
||||
(engine: AnimationEngine) => engine.scale("1.5", "1").setDuration(300),
|
||||
(engine: AnimationEngine) => engine.fadeOut(300)
|
||||
])
|
||||
.play();
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
onRotate();
|
||||
onMove();
|
||||
onScale();
|
||||
onOpacity();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
@apply flex flex-row justify-between items-center overflow-visible;
|
||||
margin: 0 -10rpx 20rpx -10rpx;
|
||||
|
||||
.item {
|
||||
@apply flex items-center justify-center h-16 bg-primary-500 rounded-xl flex-1;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
233
cool-unix/pages/demo/other/canvas.uvue
Normal file
233
cool-unix/pages/demo/other/canvas.uvue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<cl-canvas
|
||||
v-if="width > 0"
|
||||
ref="canvasRef"
|
||||
canvas-id="test"
|
||||
:height="height"
|
||||
:width="width"
|
||||
@load="onCanvasLoad"
|
||||
></cl-canvas>
|
||||
|
||||
<cl-footer>
|
||||
<!-- #ifdef H5 -->
|
||||
<cl-button type="primary" @click="previewImage">{{ t("预览图片") }}</cl-button>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef H5 -->
|
||||
<cl-button type="primary" @click="saveImage">{{ t("保存图片") }}</cl-button>
|
||||
<!-- #endif -->
|
||||
</cl-footer>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import { Canvas } from "@/uni_modules/cool-canvas";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
import { ref } from "vue";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const canvasRef = ref<ClCanvasComponentPublicInstance | null>(null);
|
||||
|
||||
// 初始化为 0，避免页面未完全渲染时 getWindowInfo 获取到的高度或宽度不准确（如已知固定高宽可直接赋值）
|
||||
const height = ref(0);
|
||||
const width = ref(0);
|
||||
|
||||
function onCanvasLoad(canvas: Canvas) {
|
||||
canvas
|
||||
.image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: width.value,
|
||||
height: height.value,
|
||||
url: "/static/demo/canvas/bg.png"
|
||||
})
|
||||
.image({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: width.value,
|
||||
height: height.value,
|
||||
url: "/static/demo/canvas/light.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 226) / 2,
|
||||
y: 60,
|
||||
width: 226,
|
||||
height: 77,
|
||||
url: "/static/demo/canvas/text-yqhy.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 325) / 2,
|
||||
y: 125,
|
||||
width: 325,
|
||||
height: 77,
|
||||
url: "/static/demo/canvas/text-dezk.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 196) / 2,
|
||||
y: 190,
|
||||
width: 196,
|
||||
height: 62,
|
||||
url: "/static/demo/canvas/text-xrfl.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 374) / 2 - 1,
|
||||
y: 500,
|
||||
width: 374,
|
||||
height: 220,
|
||||
url: "/static/demo/canvas/rp-t.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 327) / 2,
|
||||
y: 280,
|
||||
width: 327,
|
||||
height: 430,
|
||||
url: "/static/demo/canvas/bg-content.png"
|
||||
})
|
||||
.image({
|
||||
x: 30,
|
||||
y: 240,
|
||||
width: 114,
|
||||
height: 120,
|
||||
url: "/static/demo/canvas/gold-l.png"
|
||||
})
|
||||
.image({
|
||||
x: width.value - 106 - 50,
|
||||
y: 240,
|
||||
width: 106,
|
||||
height: 107,
|
||||
url: "/static/demo/canvas/gold-r.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 350) / 2,
|
||||
y: 595,
|
||||
width: 350,
|
||||
height: 122,
|
||||
url: "/static/demo/canvas/rp-b.png"
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 208) / 2,
|
||||
y: 631,
|
||||
width: 208,
|
||||
height: 89,
|
||||
url: "/static/demo/canvas/invite-btn.png"
|
||||
})
|
||||
.div({
|
||||
x: (width.value - 276) / 2,
|
||||
y: 335,
|
||||
width: 276,
|
||||
height: 210,
|
||||
backgroundColor: "#fff",
|
||||
radius: 10
|
||||
})
|
||||
.text({
|
||||
x: 0,
|
||||
y: 350,
|
||||
width: width.value,
|
||||
content: "新人专享",
|
||||
color: "#F73035",
|
||||
textAlign: "center",
|
||||
fontSize: 28,
|
||||
fontWeight: "bold"
|
||||
})
|
||||
.text({
|
||||
x: 0,
|
||||
y: 390,
|
||||
width: width.value,
|
||||
content: "限时领券30元",
|
||||
color: "#F73035",
|
||||
textAlign: "center",
|
||||
fontSize: 16
|
||||
})
|
||||
.image({
|
||||
x: (width.value - 246) / 2,
|
||||
y: 432,
|
||||
width: 246,
|
||||
height: 98,
|
||||
url: "/static/demo/canvas/coupon.png"
|
||||
})
|
||||
.text({
|
||||
x: (width.value - 246) / 2,
|
||||
y: 435,
|
||||
content: "领券",
|
||||
width: 34,
|
||||
color: "#fff",
|
||||
fontSize: 11,
|
||||
textAlign: "center"
|
||||
})
|
||||
.text({
|
||||
x: (width.value - 246) / 2,
|
||||
y: 454,
|
||||
width: 86,
|
||||
content: "80",
|
||||
color: "#604E44",
|
||||
fontSize: 46,
|
||||
textAlign: "center",
|
||||
fontWeight: "bold"
|
||||
})
|
||||
.text({
|
||||
x: (width.value - 246) / 2 + 86,
|
||||
y: 459,
|
||||
width: 246 - 86,
|
||||
content: "新人专享优惠券",
|
||||
color: "#604E44",
|
||||
fontSize: 18,
|
||||
textAlign: "center"
|
||||
})
|
||||
.text({
|
||||
x: (width.value - 246) / 2 + 86,
|
||||
y: 489,
|
||||
width: 246 - 86,
|
||||
content: "2021.04.30-2021.06.30",
|
||||
color: "#604E44",
|
||||
fontSize: 12,
|
||||
textAlign: "center"
|
||||
})
|
||||
.text({
|
||||
x: 0,
|
||||
y: 560,
|
||||
width: width.value,
|
||||
content: "邀请好友，双方均可获得20元优惠券",
|
||||
color: "#756056",
|
||||
fontSize: 15,
|
||||
textAlign: "center"
|
||||
})
|
||||
.text({
|
||||
x: 0,
|
||||
y: 300,
|
||||
width: width.value,
|
||||
content: "～ 专属新人福利 ～",
|
||||
color: "#956056",
|
||||
textAlign: "center",
|
||||
opacity: 0.7
|
||||
})
|
||||
.draw();
|
||||
}
|
||||
|
||||
function previewImage() {
|
||||
canvasRef.value!.previewImage();
|
||||
}
|
||||
|
||||
function saveImage() {
|
||||
canvasRef.value!.saveImage();
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
// 同上
|
||||
height.value = uni.getWindowInfo().windowHeight;
|
||||
width.value = uni.getWindowInfo().windowWidth;
|
||||
|
||||
ui.showConfirm({
|
||||
title: t("提示"),
|
||||
message: t("本页面内容由 canvas 渲染生成，是否立即预览图片效果？"),
|
||||
confirmText: t("预览"),
|
||||
callback(action) {
|
||||
if (action == "confirm") {
|
||||
canvasRef.value!.previewImage();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
55
cool-unix/pages/demo/other/cropper.uvue
Normal file
55
cool-unix/pages/demo/other/cropper.uvue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-button @tap="chooseImage">{{ t("选择图片") }}</cl-button>
|
||||
|
||||
<cl-list border :pt="{ className: 'mt-5' }">
|
||||
<cl-list-item :label="t('可调节裁剪框大小')">
|
||||
<cl-switch v-model="resizable"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
|
||||
<cl-cropper
|
||||
ref="cropperRef"
|
||||
:resizable="resizable"
|
||||
@crop="onCrop"
|
||||
@load="onImageLoad"
|
||||
></cl-cropper>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const cropperRef = ref<ClCropperComponentPublicInstance | null>(null);
|
||||
|
||||
const resizable = ref(true);
|
||||
|
||||
function chooseImage() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ["original", "compressed"],
|
||||
sourceType: ["album", "camera"],
|
||||
success: (res) => {
|
||||
if (res.tempFilePaths.length > 0) {
|
||||
cropperRef.value!.open(res.tempFilePaths[0]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function onCrop(url: string) {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
});
|
||||
}
|
||||
|
||||
function onImageLoad(e: UniImageLoadEvent) {
|
||||
console.log("onImageLoad", e);
|
||||
}
|
||||
</script>
|
||||
50
cool-unix/pages/demo/other/day-uts.uvue
Normal file
50
cool-unix/pages/demo/other/day-uts.uvue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('格式化')">
|
||||
<cl-text>format("YYYY-MM-DD HH:mm:ss")</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('添加')">
|
||||
<cl-text>add(1, "day")</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('减去')">
|
||||
<cl-text>subtract(1, "day")</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('获取某个单位的开始时间')">
|
||||
<cl-text>startOf("day")</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('获取某个单位的结束时间')">
|
||||
<cl-text>endOf("month")</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('是否同一天')">
|
||||
<cl-text>isSame(Date)</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('是否早于')">
|
||||
<cl-text>isBefore(Date)</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('是否晚于')">
|
||||
<cl-text>isAfter(Date)</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('差值')">
|
||||
<cl-text>diff(Date)</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('差值（单位）')">
|
||||
<cl-text>diffUnit(Date, "day")</cl-text>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
88
cool-unix/pages/demo/other/qrcode.uvue
Normal file
88
cool-unix/pages/demo/other/qrcode.uvue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义')">
|
||||
<view class="flex flex-row justify-center py-3">
|
||||
<cl-qrcode
|
||||
ref="qrcodeRef"
|
||||
text="https://cool-js.com/"
|
||||
:logo="isLogo ? 'https://unix.cool-js.com/logo.png' : ''"
|
||||
:pd-radius="isPdRadius ? 50 : 0"
|
||||
:padding="isPadding ? 10 : 5"
|
||||
:foreground="isColor ? '#14b8a6' : '#000000'"
|
||||
:pd-color="isColor ? '#0d9488' : '#000000'"
|
||||
:mode="mode"
|
||||
></cl-qrcode>
|
||||
</view>
|
||||
|
||||
<cl-list border class="mt-3">
|
||||
<cl-list-item :label="t('添加LOGO')">
|
||||
<cl-switch v-model="isLogo"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('圆角定位点')">
|
||||
<cl-switch v-model="isPdRadius"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('内间距')">
|
||||
<cl-switch v-model="isPadding"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('自定义颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('导出图片')">
|
||||
<cl-button @tap="save">{{ t("预览") }}</cl-button>
|
||||
</cl-list-item>
|
||||
|
||||
<view class="p-2">
|
||||
<cl-tabs v-model="mode" :height="66" :list="modeList" show-slider></cl-tabs>
|
||||
</view>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ClQrcodeMode, ClTabsItem } from "@/uni_modules/cool-ui";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
const isLogo = ref(true);
|
||||
const isPdRadius = ref(true);
|
||||
const isPadding = ref(false);
|
||||
const isColor = ref(false);
|
||||
|
||||
const qrcodeRef = ref<ClQrcodeComponentPublicInstance | null>(null);
|
||||
|
||||
const mode = ref<ClQrcodeMode>("circular");
|
||||
const modeList = [
|
||||
{
|
||||
label: t("矩形"),
|
||||
value: "rect"
|
||||
},
|
||||
{
|
||||
label: t("点"),
|
||||
value: "circular"
|
||||
},
|
||||
{
|
||||
label: t("线性"),
|
||||
value: "line"
|
||||
},
|
||||
{
|
||||
label: t("小方格"),
|
||||
value: "rectSmall"
|
||||
}
|
||||
] as ClTabsItem[];
|
||||
|
||||
function save() {
|
||||
qrcodeRef.value!.toPng().then((url) => {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
41
cool-unix/pages/demo/other/router/index.uvue
Normal file
41
cool-unix/pages/demo/other/router/index.uvue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('跳转')">
|
||||
<cl-button @click="toPush">{{ t("跳转") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('带参数')">
|
||||
<cl-button @click="toQuery">{{ t("跳转") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('需登录')">
|
||||
<cl-button @click="toLogin">{{ t("跳转") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { router, uuid } from "@/cool";
|
||||
import DemoItem from "../../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
function toPush() {
|
||||
router.to("/pages/demo/other/router/query");
|
||||
}
|
||||
|
||||
function toQuery() {
|
||||
router.push({ path: "/pages/demo/other/router/query", query: { id: uuid() } });
|
||||
}
|
||||
|
||||
function toLogin() {
|
||||
router.push({
|
||||
path: "/pages/demo/other/router/query",
|
||||
query: { id: uuid() },
|
||||
isAuth: true
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
34
cool-unix/pages/demo/other/router/query.uvue
Normal file
34
cool-unix/pages/demo/other/router/query.uvue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('ID')">
|
||||
<cl-text>{{ id ?? "-" }}</cl-text>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('用户信息')" v-if="!user.isNull()">
|
||||
<cl-text>{{ userInfo?.nickName ?? "-" }}</cl-text>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../../components/item.uvue";
|
||||
import { router, userInfo, useStore } from "@/cool";
|
||||
|
||||
const { user } = useStore();
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
onReady(() => {
|
||||
const query = router.query();
|
||||
console.log(query);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
83
cool-unix/pages/demo/other/share.uvue
Normal file
83
cool-unix/pages/demo/other/share.uvue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('分享文本')">
|
||||
<cl-button @tap="shareText">{{ t("分享文本") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('分享图片')">
|
||||
<cl-button @tap="shareImage">{{ t("分享图片") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('分享文件')">
|
||||
<cl-button @tap="shareFile">{{ t("分享文件") }}</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('分享链接')">
|
||||
<cl-button @tap="shareLink">{{ t("分享链接") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// #ifdef APP
|
||||
import { shareWithSystem } from "@/uni_modules/cool-share";
|
||||
// #endif
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
|
||||
function shareText() {
|
||||
// #ifdef APP
|
||||
shareWithSystem({
|
||||
type: "text",
|
||||
title: "Cool Unix",
|
||||
summary: "Cool Unix 是一个高效的项目脚手架",
|
||||
success: () => {
|
||||
console.log("success");
|
||||
},
|
||||
fail: (error) => {
|
||||
console.log("fail", error);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
function shareImage() {
|
||||
// #ifdef APP
|
||||
shareWithSystem({
|
||||
type: "image",
|
||||
url: "https://cool-js.com/logo.png",
|
||||
success: () => {
|
||||
console.log("success");
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
function shareFile() {
|
||||
// #ifdef APP
|
||||
shareWithSystem({
|
||||
type: "file",
|
||||
url: "https://show.cool-admin.com/用户导入模版.xlsx",
|
||||
success: () => {
|
||||
console.log("success");
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
|
||||
function shareLink() {
|
||||
// #ifdef APP
|
||||
shareWithSystem({
|
||||
type: "link",
|
||||
url: "https://cool-js.com/",
|
||||
success: () => {
|
||||
console.log("success");
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
54
cool-unix/pages/demo/other/sign.uvue
Normal file
54
cool-unix/pages/demo/other/sign.uvue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<cl-sign ref="signRef" :height="height" :width="width" :enable-brush="isBrush"></cl-sign>
|
||||
|
||||
<view class="p-3">
|
||||
<cl-list>
|
||||
<cl-list-item :label="t('操作')">
|
||||
<cl-button type="info" @click="clear">{{ t("清空") }}</cl-button>
|
||||
<cl-button @click="preview">{{ t("预览") }}</cl-button>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('设置高度')">
|
||||
<cl-switch v-model="isFullscreen" @change="onFullscreenChange"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('毛笔效果')">
|
||||
<cl-switch v-model="isBrush"></cl-switch>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { t } from "@/locale";
|
||||
import { ref } from "vue";
|
||||
|
||||
const height = ref(200);
|
||||
const width = ref(0);
|
||||
|
||||
const isFullscreen = ref(false);
|
||||
const isBrush = ref(true);
|
||||
const signRef = ref<ClSignComponentPublicInstance | null>(null);
|
||||
|
||||
function clear() {
|
||||
signRef.value!.clear();
|
||||
}
|
||||
|
||||
function preview() {
|
||||
signRef.value!.toPng().then((url) => {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onFullscreenChange() {
|
||||
height.value = isFullscreen.value ? uni.getWindowInfo().windowHeight - 200 : 200;
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
width.value = uni.getWindowInfo().windowWidth;
|
||||
});
|
||||
</script>
|
||||
47
cool-unix/pages/demo/other/slide-verify.uvue
Normal file
47
cool-unix/pages/demo/other/slide-verify.uvue
Normal file
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-slide-verify
|
||||
v-model="status"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
></cl-slide-verify>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('没有错误提示')">
|
||||
<cl-slide-verify :show-fail="false"></cl-slide-verify>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('转动图片')">
|
||||
<cl-slide-verify
|
||||
mode="image"
|
||||
image-url="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||
></cl-slide-verify>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { t } from "@/locale";
|
||||
import { useUi } from "@/uni_modules/cool-ui";
|
||||
|
||||
const ui = useUi();
|
||||
|
||||
const status = ref(false);
|
||||
|
||||
function onSuccess() {
|
||||
ui.showToast({
|
||||
message: t("验证通过")
|
||||
});
|
||||
}
|
||||
|
||||
function onFail() {
|
||||
ui.showToast({
|
||||
message: t("验证失败")
|
||||
});
|
||||
}
|
||||
</script>
|
||||
71
cool-unix/pages/demo/other/svg.uvue
Normal file
71
cool-unix/pages/demo/other/svg.uvue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<view class="flex flex-row">
|
||||
<cl-svg src="/static/demo/svg/category.svg" class="h-6 w-6"></cl-svg>
|
||||
<cl-svg src="/static/demo/svg/shopping-cart.svg" class="h-6 w-6 ml-3"></cl-svg>
|
||||
<cl-svg src="/static/demo/svg/points.svg" class="h-6 w-6 ml-3"></cl-svg>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同大小')">
|
||||
<view class="flex flex-row">
|
||||
<cl-svg src="/static/demo/svg/points.svg" class="h-10 w-10"></cl-svg>
|
||||
<cl-svg src="/static/demo/svg/points.svg" class="h-8 w-8 ml-3"></cl-svg>
|
||||
<cl-svg src="/static/demo/svg/points.svg" class="h-6 w-6 ml-3"></cl-svg>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同颜色')">
|
||||
<view class="flex flex-row">
|
||||
<!-- #ifdef MP -->
|
||||
<cl-svg :src="svg" color="primary" class="h-6 w-6"></cl-svg>
|
||||
|
||||
<cl-svg :src="svg" color="#d946ef" class="h-6 w-6 ml-3"></cl-svg>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifndef MP -->
|
||||
<cl-svg
|
||||
src="/static/demo/svg/category.svg"
|
||||
color="primary"
|
||||
class="h-6 w-6"
|
||||
></cl-svg>
|
||||
<cl-svg
|
||||
src="/static/demo/svg/shopping-cart.svg"
|
||||
color="#eab308"
|
||||
class="h-6 w-6 ml-3"
|
||||
></cl-svg>
|
||||
<cl-svg
|
||||
src="/static/demo/svg/points.svg"
|
||||
color="#a855f7"
|
||||
class="h-6 w-6 ml-3"
|
||||
></cl-svg>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<!-- #ifdef APP-ANDROID || H5 -->
|
||||
<demo-item :label="t('使用base64')">
|
||||
<view class="flex flex-row">
|
||||
<cl-svg :src="base64" class="h-6 w-6"></cl-svg>
|
||||
</view>
|
||||
</demo-item>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
|
||||
const svg = ref(
|
||||
`<svg t="1756119341770" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7779" width="64" height="64"><path d="M783.1 899.3H242.9c-97.7 0-177.3-79.5-177.3-177.3V302.6c0-97.7 79.5-177.3 177.3-177.3H783c97.7 0 177.3 79.5 177.3 177.3V722c0.1 97.7-79.5 177.3-177.2 177.3zM242.9 214.8c-48.4 0-87.8 39.4-87.8 87.8V722c0 48.4 39.4 87.8 87.8 87.8H783c48.4 0 87.8-39.4 87.8-87.8V302.6c0-48.4-39.4-87.8-87.8-87.8H242.9z" fill="#333333" p-id="7780"></path><path d="M513 600.5c-24.9 0-49.9-7.3-71.6-21.8l-2.9-2.1-214.9-170.1c-19.4-15.3-22.7-43.5-7.3-62.8 15.3-19.4 43.5-22.6 62.8-7.3l213.2 168.8c12.7 7.8 28.7 7.8 41.5 0L747 336.4c19.3-15.3 47.5-12.1 62.8 7.3 15.3 19.4 12.1 47.5-7.3 62.8L584.6 578.7c-21.7 14.5-46.7 21.8-71.6 21.8z" fill="#333333" p-id="7781"></path></svg>`
|
||||
);
|
||||
|
||||
const base64 = ref(
|
||||
`data:image/svg+xml;base64,PHN2ZyB0PSIxNzU2MTE2OTQxMjk0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc2MTYiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTU0MS44IDkyOC41aC02MS4xYy01MC42IDAtOTEuOC00MS4yLTkxLjgtOTEuOFY2MTMuNmMwLTUwLjYgNDEuMi05MS44IDkxLjgtOTEuOGg2MS4xYzUwLjYgMCA5MS44IDQxLjIgOTEuOCA5MS44djIyMy4xYzAgNTAuNy00MS4xIDkxLjgtOTEuOCA5MS44eiBtLTYxLjEtMzE2LjJsLTEuMyAyMjQuNCA2Mi41IDEuM2MwLjcgMCAxLjMtMC42IDEuMy0xLjNWNjEzLjZsLTYyLjUtMS4zek04MzQuOSA5MjguNWgtNjEuMWMtNTAuNiAwLTkxLjgtNDEuMi05MS44LTkxLjhWNDA5LjVjMC01MC42IDQxLjItOTEuOCA5MS44LTkxLjhoNjEuMWM1MC42IDAgOTEuOCA0MS4yIDkxLjggOTEuOHY0MjcuM2MwIDUwLjYtNDEuMiA5MS43LTkxLjggOTEuN3ogbS02MS4yLTUyMC40bC0xLjMgNDI4LjYgNjIuNSAxLjNjMC43IDAgMS4zLTAuNiAxLjMtMS4zVjQwOS41bC02Mi41LTEuNHpNMjUyLjQgOTI4LjVoLTYxLjFjLTUwLjYgMC05MS44LTQxLjItOTEuOC05MS44di04MC4yYzAtNTAuNiA0MS4yLTkxLjggOTEuOC05MS44aDYxLjFjNTAuNiAwIDkxLjggNDEuMiA5MS44IDkxLjh2ODAuMmMwIDUwLjctNDEuMiA5MS44LTkxLjggOTEuOHogbS02MS4xLTE3My4zbC0xLjMgODEuNSA2Mi41IDEuM2MwLjcgMCAxLjMtMC42IDEuMy0xLjN2LTgwLjJsLTYyLjUtMS4zek0xNDQuNiA2MjUuNWMtMTEuNiAwLTIzLjItNC40LTMyLTEzLjMtMTcuNy0xNy43LTE3LjYtNDYuMyAwLTY0TDUyNiAxMzUuM2MxNy43LTE3LjYgNDYuMy0xNy42IDY0IDAgMTcuNyAxNy43IDE3LjYgNDYuMyAwIDY0TDE3Ni42IDYxMi4yYy04LjkgOC44LTIwLjUgMTMuMy0zMiAxMy4zeiIgZmlsbD0iIzMzMzMzMyIgcC1pZD0iNzYxNyI+PC9wYXRoPjxwYXRoIGQ9Ik01ODguNCAzNjQuN2MtMjUgMC00NS4yLTIwLjMtNDUuMi00NS4yVjIxOC45YzAtMjAuMy0xNi41LTM2LjgtMzYuOC0zNi44SDQwNS44Yy0yNSAwLTQ1LjItMjAuMy00NS4yLTQ1LjJzMjAuMy00NS4yIDQ1LjItNDUuMmgxMDAuNmM3MC4yIDAgMTI3LjIgNTcuMSAxMjcuMiAxMjcuMnYxMDAuNmMwIDI1LTIwLjIgNDUuMi00NS4yIDQ1LjJ6IiBmaWxsPSIjMzMzMzMzIiBwLWlkPSI3NjE4Ij48L3BhdGg+PC9zdmc+`
|
||||
);
|
||||
</script>
|
||||
19
cool-unix/pages/demo/other/vibrate.uvue
Normal file
19
cool-unix/pages/demo/other/vibrate.uvue
Normal file
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('基础用法')">
|
||||
<cl-button @tap="onVibrate">{{ t("点击触发") }}</cl-button>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { vibrate } from "@/uni_modules/cool-vibrate";
|
||||
|
||||
function onVibrate() {
|
||||
vibrate(1);
|
||||
}
|
||||
</script>
|
||||
147
cool-unix/pages/demo/other/watermark.uvue
Normal file
147
cool-unix/pages/demo/other/watermark.uvue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义样式')">
|
||||
<view class="flex">
|
||||
<cl-watermark
|
||||
:text="customText"
|
||||
:font-size="fontSize"
|
||||
:color="color"
|
||||
:dark-color="darkColor"
|
||||
:opacity="opacity"
|
||||
:rotate="rotate"
|
||||
:width="width"
|
||||
:height="height"
|
||||
:gap-x="gapX"
|
||||
:gap-y="gapY"
|
||||
:font-weight="fontWeight"
|
||||
>
|
||||
<view
|
||||
class="flex flex-col p-4 rounded-xl bg-surface-50 dark:bg-surface-800 h-[400rpx]"
|
||||
>
|
||||
<cl-text>
|
||||
明月几时有？把酒问青天。 不知天上宫阙，今夕是何年。
|
||||
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。 起舞弄清影，何似在人间。
|
||||
</cl-text>
|
||||
</view>
|
||||
</cl-watermark>
|
||||
</view>
|
||||
|
||||
<cl-list border class="mt-3">
|
||||
<cl-list-item :label="t('水印文本')">
|
||||
<cl-input
|
||||
v-model="customText"
|
||||
placeholder="请输入水印文本"
|
||||
:pt="{ className: 'w-[300rpx]' }"
|
||||
/>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('字体大小')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider v-model="fontSize" :min="12" :max="32" :step="1"></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<!-- #ifndef APP -->
|
||||
<cl-list-item :label="t('透明度')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider
|
||||
v-model="opacity"
|
||||
:min="0.1"
|
||||
:max="1"
|
||||
:step="0.05"
|
||||
></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
<!-- #endif -->
|
||||
|
||||
<cl-list-item :label="t('旋转角度')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider
|
||||
v-model="rotate"
|
||||
:min="-180"
|
||||
:max="180"
|
||||
:step="5"
|
||||
></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('水印宽度')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider v-model="width" :min="80" :max="300" :step="10"></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('水印高度')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider v-model="height" :min="40" :max="200" :step="10"></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('水平间距')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider v-model="gapX" :min="20" :max="200" :step="10"></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('垂直间距')">
|
||||
<view class="w-[300rpx]">
|
||||
<cl-slider v-model="gapY" :min="20" :max="200" :step="10"></cl-slider>
|
||||
</view>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('字体粗细')">
|
||||
<cl-tabs
|
||||
v-model="fontWeight"
|
||||
:list="fontWeightList"
|
||||
:height="60"
|
||||
show-slider
|
||||
></cl-tabs>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('图片保护')">
|
||||
<view class="flex">
|
||||
<cl-watermark text="© Cool UI" :width="200" :height="80" :opacity="0.9">
|
||||
<image
|
||||
src="https://unix.cool-js.com/images/demo/avatar.jpg"
|
||||
mode="aspectFit"
|
||||
class="w-full"
|
||||
></image>
|
||||
</cl-watermark>
|
||||
</view>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import DemoItem from "../components/item.uvue";
|
||||
import { ref } from "vue";
|
||||
import { t } from "@/locale";
|
||||
import type { ClTabsItem } from "@/uni_modules/cool-ui";
|
||||
|
||||
const customText = ref("Cool UI");
|
||||
const fontSize = ref(16);
|
||||
const color = ref("rgba(0, 0, 0, 0.15)");
|
||||
const darkColor = ref("rgba(255, 255, 255, 0.15)");
|
||||
const opacity = ref(1);
|
||||
const rotate = ref(-22);
|
||||
const width = ref(120);
|
||||
const height = ref(64);
|
||||
const gapX = ref(100);
|
||||
const gapY = ref(100);
|
||||
const fontWeight = ref("normal");
|
||||
|
||||
const fontWeightList = [
|
||||
{
|
||||
label: t("正常"),
|
||||
value: "normal"
|
||||
},
|
||||
{
|
||||
label: t("加粗"),
|
||||
value: "bold"
|
||||
}
|
||||
] as ClTabsItem[];
|
||||
</script>
|
||||
80
cool-unix/pages/demo/status/badge.uvue
Normal file
80
cool-unix/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 overflow-visible">
|
||||
<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 overflow-visible">
|
||||
<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://unix.cool-js.com/images/demo/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 overflow-visible">
|
||||
<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>
|
||||
84
cool-unix/pages/demo/status/countdown.uvue
Normal file
84
cool-unix/pages/demo/status/countdown.uvue
Normal file
@@ -0,0 +1,84 @@
|
||||
<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('3秒后开始倒计时')">
|
||||
<cl-countdown ref="countdownRef" :second="5" :auto="false"></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 { onMounted, 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: "倒计时完成"
|
||||
});
|
||||
}
|
||||
|
||||
const countdownRef = ref<ClCountdownComponentPublicInstance | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
countdownRef.value!.next();
|
||||
}, 3000);
|
||||
});
|
||||
</script>
|
||||
29
cool-unix/pages/demo/status/loadmore.uvue
Normal file
29
cool-unix/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
cool-unix/pages/demo/status/noticebar.uvue
Normal file
46
cool-unix/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>
|
||||
69
cool-unix/pages/demo/status/progress-circle.uvue
Normal file
69
cool-unix/pages/demo/status/progress-circle.uvue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<cl-page>
|
||||
<view class="p-3">
|
||||
<demo-item :label="t('自定义')">
|
||||
<cl-progress-circle
|
||||
:value="value"
|
||||
:color="isColor ? 'red' : null"
|
||||
:un-color="isColor ? '#f7bfbf' : null"
|
||||
:size="isSize ? 80 : 120"
|
||||
:show-text="isText"
|
||||
:duration="isDuration ? 200 : 500"
|
||||
></cl-progress-circle>
|
||||
|
||||
<cl-list
|
||||
border
|
||||
:pt="{
|
||||
className: 'mt-5'
|
||||
}"
|
||||
>
|
||||
<cl-list-item :label="t('改个颜色')">
|
||||
<cl-switch v-model="isColor"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示文本')">
|
||||
<cl-switch v-model="isText"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('快一些')">
|
||||
<cl-switch v-model="isDuration"></cl-switch>
|
||||
</cl-list-item>
|
||||
|
||||
<cl-list-item :label="t('显示文本')">
|
||||
<cl-button type="light" size="small" icon="add-line" @tap="add"></cl-button>
|
||||
<cl-button
|
||||
type="light"
|
||||
size="small"
|
||||
icon="subtract-line"
|
||||
@tap="sub"
|
||||
></cl-button>
|
||||
</cl-list-item>
|
||||
</cl-list>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
|
||||
const isSize = ref(false);
|
||||
const isText = ref(true);
|
||||
const isColor = ref(false);
|
||||
const isDuration = ref(false);
|
||||
const value = ref(70);
|
||||
|
||||
function add() {
|
||||
if (value.value < 100) {
|
||||
value.value += 10;
|
||||
}
|
||||
}
|
||||
|
||||
function sub() {
|
||||
if (value.value > 0) {
|
||||
value.value -= 10;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
26
cool-unix/pages/demo/status/progress.uvue
Normal file
26
cool-unix/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="false"></cl-progress>
|
||||
</demo-item>
|
||||
</view>
|
||||
</cl-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { t } from "@/locale";
|
||||
import DemoItem from "../components/item.uvue";
|
||||
</script>
|
||||
77
cool-unix/pages/demo/status/rolling-number.uvue
Normal file
77
cool-unix/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
cool-unix/pages/demo/status/skeleton.uvue
Normal file
61
cool-unix/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://unix.cool-js.com/images/demo/bg1.png"
|
||||
></cl-image>
|
||||
</cl-skeleton>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('圆形')">
|
||||
<cl-skeleton type="circle" :loading="loading">
|
||||
<cl-image
|
||||
:radius="100"
|
||||
src="https://unix.cool-js.com/images/demo/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