Cool Uni

主题

Confirm 确认框 ​

方法 ​

事件名称说明参数
open打开function(option: Options)

Options 有效值 ​

参数说明类型可选值默认值
title标题string
width对话框宽度string80%
show-cancel-button是否显示取消按钮booleantrue
cancel-button-text取消按文本内容string取消
show-confirm-button是否显示确认按钮booleantrue
confirm-button-text确认按钮文本内容string确认
close-on-click-modal是否可以通过点击 modal 关闭booleantrue
before-close关闭前回调functionfunction({ action, done })
callback关闭后回调，若不使用 Promise，可以使用此参数指定functionfunction({ action })

事件 ​

事件名称说明回调参数
close关闭回调

示例 ​

基本弹窗 ​

html
<template>
	<cl-page :padding="20">
		<cl-confirm ref="Confirm"></cl-confirm>

		<cl-button @tap="open">打开</cl-button>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCool } from "/@/cool";

	const { ui } = useCool();

	const Confirm = ref<ClConfirm.Ref>();

	function open() {
		Confirm.value?.open({
			title: "温馨提示",
			message: "你有一个待取信件",
			callback(action) {
				switch (action) {
					case "confirm":
						ui.showToast("领取成功");
						break;

					case "cancel":
						ui.showToast("已取消");
						break;

					case "close":
						ui.showToast("已关闭");
						break;
				}
			}
		});
	}
</script>

自定义内容

html
<template>
	<cl-page :padding="20">
		<cl-confirm ref="Confirm">
			<cl-input></cl-input>
		</cl-confirm>

		<cl-button @tap="open">打开</cl-button>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCool } from "/@/cool";

	const { ui } = useCool();

	const Confirm = ref<ClConfirm.Ref>();

	function open() {
		Confirm.value?.open({
			title: "温馨提示"
		});
	}
</script>

关闭回掉 ​

showLoading 和 hideLoading 可控制确认按钮的加载状态以便来处理请求场景。

html
<template>
	<cl-page :padding="20">
		<cl-confirm ref="Confirm"></cl-confirm>

		<cl-button @tap="open">打开</cl-button>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { useCool } from "/@/cool";

	const { ui } = useCool();

	const Confirm = ref<ClConfirm.Ref>();

	function open() {
		Confirm.value?.open({
			title: "温馨提示",
			message: "你有一个待取信件",
			beforeClose(action, { done, showLoading, hideLoading }) {
				if (action == "confirm") {
					showLoading();

					setTimeout(() => {
						done();
						ui.showToast("领取成功");
					}, 2000);
				} else {
					done();
				}
			}
		});
	}
</script>