Confirm 模式

提示：

1. 可用于替代浏览器内置的 window.confirm 弹窗；
2. 只能同时创建一个 confirm 弹窗；
3. 不能使用 esc 按键关闭。

基础用法

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            cancel: {
                callback: () => {
                    alert( "取消" );
                }
            },
            ok: {
                callback: () => {
                    alert( "确定" );
                }
            }
        } );
    }
</script>

自定义遮罩层背景色

注意：

默认情况下，遮罩层背景色是通过 css 变量设置的，如果想通过参数的形式自定义遮罩层背景色，则对应的 css 变量将失效，并且在深 / 浅色模式切换时，将不会自动适配，此时背景色将始终是参数指定的颜色值。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            maskBackground: "rgba(190, 190, 255, .9)"
        } );
    }
</script>

自定义按钮文字

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            ok: {
                text: "Yes"
            },
            cancel: {
                text: "No"
            }
        } );
    }
</script>

自定义宽度

提示：

支持所有 css 宽度单位，如：px、em、rem、vw 等等，也可以设置成百分比形式，如：80%。

注意：

组件会对传入的宽度值进行计算检测，根据检测结果按照如下规则进行设置：

1. 符合要求则正常设置传入的宽度值；
2. 如果宽度值大于页面可视区域宽度，将自动调整为【页面可视区域宽度 - 40px】；
3. 如果宽度值小于 300px，将自动调整为 300px，因为弹窗的最小有效宽度是 300px。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            width: "800px"
        } );
    }
</script>

动画模式

<template>
    <button @click="openScale">scale 模式</button>
    <button @click="openSlide">slide 模式</button>
    <button @click="openFade">fade 模式</button>
</template>

<script setup>
    const openScale = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            animationType: "scale"
        } );
    }
    const openSlide = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            animationType: "slide"
        } );
    }
    const openFade = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            animationType: "fade"
        } );
    }
</script>

使用 HTML 内容

警告：

动态渲染 HTML 非常危险，这将很容易导致 XSS 攻击。因此，在不能保证绝对可信和安全的情况下，不要将用户提交的内容传给 content 属性。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: `<div style="font-size: 20px;color: #f00;">弹窗内容</div>`,
            useHtmlContent: true
        } );
    }
</script>

打开和关闭后的回调事件

提示：

这两个回调事件会在打开和关闭 【动画结束后】 触发。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            afterOpen: () => {
                alert( "打开了 confirm" );
            },
            afterClose: () => {
                alert( "关闭了 confirm" );
            }
        } );
    }
</script>

调用 close 方法关闭

提示：

可根据实际需要，通过手动调用 $tinylayer.confirm.close() 方法关闭 confirm 弹窗。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: `<button onclick="$tinylayer.confirm.close()">点击关闭 Confirm</button>`,
            useHtmlContent: true
        } );
    }
</script>

自定义关闭时机

提示：

一般用于点击确定按钮后，向后端发送请求，得到响应后再决定是否关闭弹窗。

<template>
    <button @click="open">打开</button>
</template>

<script setup>
    const open = () => {
        $tinylayer.confirm.open( {
            title: "标题",
            content: "弹窗内容",
            ok: {
				closable: false,
				text: "保存",
				callback: ( okConfig, confirmConfig ) => {
                    confirmConfig.cancel.disabled = true;
					okConfig.disabled = true;
					okConfig.loading = true;
					okConfig.text = "正在保存";
					setTimeout( () => {
						$tinylayer.confirm.close();
					}, 3000 )
				}
			}
        } );
    }
</script>

属性

属性	说明	类型	默认值
title	标题	String	-
content	内容	String	-
zIndex	层级	Number	2000
maskBackground	遮罩层背景色	String	-
width	弹框宽度（最小有效值：300px）	String	400px
useHtmlContent	使用 HTML 内容	Boolean	false
animationType	动画模式，可选值：scale, slide, fade	String	scale
afterOpen	打开后的回调事件	Function	空函数
afterClose	关闭后的回调事件	Function	空函数
ok.text	确定按钮的文字	String	确定
ok.closable	点击确定按钮是否立即关闭弹窗	Boolean	true
ok.disabled	禁用确定按钮	Boolean	false
ok.loading	开启确定按钮的 loading 效果	Boolean	false
ok.callback	点击确定按钮的回调事件，参数： 1. 确定按钮的配置项 2. 弹窗的所有配置项	Function	空函数
cancel.text	取消按钮的文字	String	取消
cancel.disabled	禁用取消按钮	Boolean	false
cancel.callback	点击取消按钮的回调事件	Function	空函数

方法

// 打开
$tinylayer.confirm.open();

// 关闭
$tinylayer.confirm.close();