自动关闭

提示：

默认情况下，会在弹窗左下角（前提：未隐藏尾部区域且未自定义尾部）显示倒计时提示语，也可利用拦截器功能自定义提示语的位置和形式。

默认

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        :auto-close="5000"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

自定义提示文字

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        auto-close-text="秒钟后将自动关闭弹窗"
        :auto-close="5000"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
</script>

拦截器

提示：

有时需要在自动关闭倒计时结束时给出提示，然后让用户选择是否关闭弹窗，这个功能可以通过 auto-close-intercept 属性和 @auto-close-intercept 事件来实现，即可在倒计时结束时拦截关闭操作。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        :auto-close="5000"
        auto-close-intercept
        @auto-close-intercept="intercept"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

    const visible = ref( false );
    const open = () => {
        visible.value = true;
    }
    const intercept = () => {
        $tinylayer.alert.info( {
            title: "提示",
            content: "点击确定按钮关闭弹窗。",
            maskBackground: "rgba(0, 0, 0, .3)",
            ok: {
                callback: () => {
                    visible.value = false;
                }
            }
        } );
    }
</script>

自定义提示形式

提示：

默认配置下，开启自动关闭功能会在弹窗左下角显示倒计时提示语，如果开发者不喜欢这种提示形式，可设置 :auto-close-visible="false" 来关闭默认的提示语，然后利用 @auto-close-countdown 事件来自行设置提示形式。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题" 
        :ok-text="okText"
        :auto-close="5000"
        :auto-close-visible="false" 
        @auto-close-countdown="countdown"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

<script setup>
    import { ref } from "vue";

	const text = "确定(5)";
	const okText = ref( text );
	const visible = ref( false );
	const open = () => {
		okText.value = text;
		visible.value = true;
	}
	const countdown = ( ms, s ) => {
		okText.value = `确定(${ s })`;
	}
</script>