版本发布
This commit is contained in:
icssoa
190
pages/demo/feedback/action-sheet.uvue
Normal file
190
pages/demo/feedback/action-sheet.uvue
Normal file
@@ -0,0 +1,190 @@
|
||||
<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">
|
||||
<template #prepend>
|
||||
<view class="px-3 mb-3">
|
||||
<cl-text>开通会员享受更多特权和服务，包括无广告体验、专属客服等</cl-text>
|
||||
</view>
|
||||
</template>
|
||||
<template #append>
|
||||
<view class="pb-5 pt-2 px-3">
|
||||
<cl-checkbox v-model="agree">
|
||||
请阅读并同意《会员服务协议》和《隐私政策》
|
||||
</cl-checkbox>
|
||||
</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: "feedback-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: t("请阅读并同意《会员服务协议》和《隐私政策》")
|
||||
});
|
||||
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
pages/demo/feedback/confirm.uvue
Normal file
94
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>
|
||||
101
pages/demo/feedback/popup.uvue
Normal file
101
pages/demo/feedback/popup.uvue
Normal file
@@ -0,0 +1,101 @@
|
||||
<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
|
||||
fill
|
||||
: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://uni-docs.cool-js.com/demo/pages/demo/static/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
pages/demo/feedback/toast.uvue
Normal file
93
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()">打开</cl-button>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('不同位置')">
|
||||
<view class="flex flex-row">
|
||||
<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">
|
||||
<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">
|
||||
<cl-button type="light" @tap="openType('stop')">{{ t("停止") }}</cl-button>
|
||||
</view>
|
||||
</demo-item>
|
||||
|
||||
<demo-item :label="t('自定义图标')">
|
||||
<view class="flex flex-row">
|
||||
<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>
|
||||
Reference in New Issue
Block a user