Loading 模式

提示：

1. 这是一个全屏 loading 弹窗，将盖住整个页面；
2. 只能同时创建一个 loading 弹窗；
3. 不能使用 esc 按键关闭。

基础用法

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

<script setup>
    const open = () => {
        $tinylayer.loading.open();
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

带有提示信息

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( "正在加载" );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

自定义背景颜色

注意：

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

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( {
            text: "正在加载",
            background: "rgba(190, 190, 255, .9)"
        } );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

禁用动画过渡效果

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( {
            text: "正在加载",
            transitionEffect: false
        } );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

关闭后的回调事件

提示：

此回调事件会在关闭 【动画结束后】 触发。

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( {
            text: "正在加载",
            afterClose: () => {
                alert( "关闭了 loading" );
            }
        } );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

禁止页面滚动

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( {
            text: "正在加载",
            bodyScrollable: false
        } );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

自定义图案

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

<script setup>
    const open = () => {
        $tinylayer.loading.open( {
            text: "正在加载",
            spinner: `<div class="custom-spinner"></div>`
        } );
        setTimeout( () => {
            $tinylayer.loading.close();
        }, 3000 )
    }
</script>

<style>
    .custom-spinner {
        width: 44px;
        height: 44px;
        background-color: var(--tinylayer-theme-color);
        border-radius: 100%;
        animation: custom-spinner-animation infinite 1s linear;
    }
    @keyframes custom-spinner-animation {
        0% {
            transform: scale(.1);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
</style>

属性

属性	说明	类型	默认值
text	提示语	String	-
background	背景色	String	-
spinner	自定义 loading 图案的 HTML 代码	String	-
zIndex	层级	Number	2000
transitionEffect	是否有淡入淡出的动画过渡效果	Boolean	true
bodyScrollable	打开弹窗时，body 是否可以滚动	Boolean	true
afterClose	关闭后的回调事件	Function	空函数

方法

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

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