自定义尾部

自定义整个尾部

提示：

使用 footer 插槽。

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

    <TinyLayer v-model="visible" title="弹窗标题">
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <template #footer>
            <p><button @click="close">点击关闭弹窗</button></p>
        </template>
    </TinyLayer>
</template>

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

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

增加尾部自定义按钮

提示：

通过 footer-button 插槽可以在弹窗尾部增加自定义的按钮，不会影响到内置的取消按钮和确定按钮。但是 footer-button 插槽会受到 footer 插槽的影响，一旦设置了 footer 插槽，意味着整个尾部区域将变为自定义的，此时 footer-button 插槽也将无效。

TinyLayer 内置了两个按钮类：
1. tinylayer-public-button-default（与确定按钮样式相同）
2. tinylayer-public-button-default-plain（透明背景，其余与确定按钮样式基本相同）

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

    <TinyLayer v-model="visible" title="弹窗标题" :cancel-visible="false">
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <template #footer-button>
            <button 
                class="tinylayer-public-button-default-plain" 
                @click="customBtnEvent( '自定义按钮1' )"
            >自定义按钮1</button>
            <button 
                class="tinylayer-public-button-default" 
                @click="customBtnEvent( '自定义按钮2' )"
            >自定义按钮2</button>
        </template>
    </TinyLayer>
</template>

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

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

自定义尾部左侧内容

提示：

通过 footer-left 插槽可以在弹窗尾部左侧添加自定义内容。不过需要注意的是，如果开启了自动关闭功能，并且使用了默认的自动关闭显示形式，那么添加的自定义内容将在自动关闭提示语右侧显示。

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

    <TinyLayer v-model="visible" title="弹窗标题">
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <template #footer-button>
            <button 
                class="tinylayer-public-button-default-plain" 
                @click="customBtnEvent( '自定义按钮' )"
            >自定义按钮</button>
        </template>
    </TinyLayer>
</template>

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

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