确定按钮 loading 效果

说明：

确定按钮的 loading 效果可以搭配 ok-text、ok-disabled、ok-closable 属性来达到最佳的使用效果。

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题"
        :cancel-disabled="cancelDisabled" 
        :ok-disabled="okDisabled" 
        :ok-closable="false" 
        :ok-loading="okLoading" 
        :ok-text="okText" 
        @ok="onOk" 
        @after-close="afterClose"
    >
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
        <div>这里是弹窗内容...</div>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const cancelDisabled = ref( false );
    const okDisabled = ref( false );
    const okLoading = ref( false );
    const okText = ref( "确定" );

    const open = () => {
        visible.value = true;
    }
    const onOk = () => {
        cancelDisabled.value = true;
        okDisabled.value = true;
        okLoading.value = true;
        okText.value = "稍后关闭";
        setTimeout( () => {
            visible.value = false;
        }, 2000 )
    }
    const afterClose = () => {
        cancelDisabled.value = false;
        okDisabled.value = false;
        okLoading.value = false;
        okText.value = "确定";
    }
</script>