Alert 模式

提示：

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

基础用法

<template>
    <button @click="openInfoLayer">Info 类型</button>
    <button @click="openSuccessLayer">Success 类型</button>
    <button @click="openWarningLayer">Warning 类型</button>
    <button @click="openErrorLayer">Error 类型</button>
</template>

<script setup>
    const openInfoLayer = () => {
        $tinylayer.alert.info( "标题", "弹窗内容" );
    }
    const openSuccessLayer = () => {
        $tinylayer.alert.success( "标题", "弹窗内容" );
    }
    const openWarningLayer = () => {
        $tinylayer.alert.warning( "标题", "弹窗内容" );
    }
    const openErrorLayer = () => {
        $tinylayer.alert.error( "标题", "弹窗内容" );
    }
</script>

自定义遮罩层背景色

注意：

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

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

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

自定义按钮文字

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

<script setup>
    const open = () => {
        $tinylayer.alert.info( {
            title: "标题",
            content: "弹窗内容",
            ok: {
                text: "我知道了"
            }
        } );
    }
</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.alert.info( {
            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.alert.info( {
            title: "标题",
            content: "弹窗内容",
            animationType: "scale"
        } );
    }
    const openSlide = () => {
        $tinylayer.alert.info( {
            title: "标题",
            content: "弹窗内容",
            animationType: "slide"
        } );
    }
    const openFade = () => {
        $tinylayer.alert.info( {
            title: "标题",
            content: "弹窗内容",
            animationType: "fade"
        } );
    }
</script>

使用 HTML 内容

警告：

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

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

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

打开和关闭后的回调事件

提示：

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

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

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

确认按钮回调事件

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

<script setup>
    const open = () => {
        $tinylayer.alert.info( {
            title: "标题",
            content: "弹窗内容",
            ok: {
                callback: () => {
                    alert( "点击了确定按钮" );
                }
            }
        } );
    }
</script>

调用 close 方法关闭

提示：

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

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

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

属性

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

方法

// 打开
$tinylayer.alert.info();
$tinylayer.alert.success();
$tinylayer.alert.warning();
$tinylayer.alert.error();

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