确认框

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Options

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

Events

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

示例

基本弹窗

<template>
	<view>
		<cl-button @tap="open">打开</cl-button>
		<cl-confirm ref="confirm"> </cl-confirm>
	</view>
</template>

<script>
	export default {
		methods: {
			open() {
				this.$refs["confirm"].open({
					title: "提示",
					message: "你已成功使用了 COOL-UNI 组件， 祝你有个愉快的体验~~",
					callback: ({ action }) => {
						console.log(action);
					}
				});
			}
		}
	};
</script>

自定义内容

<template>
	<view>
		<cl-button @tap="open2">打开</cl-button>
		<cl-confirm ref="confirm2">
			<cl-input v-model="text" placeholder="请填写名称"></cl-input>
		</cl-confirm>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: ""
			};
		},

		methods: {
			open() {
				this.text = "";

				this.$refs.confirm2
					.open({
						title: "提示"
					})
					.then(() => {
						this.$refs.toast.open(
							this.text ? `你填写的是${this.text}` : "你干嘛不填！！"
						);
					})
					.catch(() => {
						this.$refs.toast.open("你干嘛关闭！！");
					});
			}
		}
	};
</script>