内容区域 loading 效果

说明：

当内容区域中有表单元素，在提交表单时，为了防止表单项被修改，可使用 content-loading 属性设置一个 “遮挡层”，同时还能拥有较好的视觉提示，配合确定按钮的相关属性一起使用效果更好。

一般用于提交表单或者表单数据回显前的请求等待状态。

vue

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

    <TinyLayer 
        v-model="visible" 
        title="弹窗标题"
        content-loading-text="提交中，请稍后"
        :content-loading="contentLoading"
        :cancel-disabled="cancelDisabled"
        :ok-disabled="okDisabled" 
        :ok-closable="false" 
        :ok-loading="okLoading" 
        :ok-text="okText" 
        @ok="onOk" 
        @after-close="afterClose"
    >
        <textarea type="text" placeholder="随便写点什么都行"></textarea>
    </TinyLayer>
</template>

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

    const visible = ref( false );
    const contentLoading = ref( false );
    const cancelDisabled = ref( false );
    const okDisabled = ref( false );
    const okLoading = ref( false );
    const okText = ref( "提交" );

    const open = () => {
        visible.value = true;
    }
    const onOk = () => {
        contentLoading.value = true;
        cancelDisabled.value = true;
        okDisabled.value = true;
        okLoading.value = true;
        okText.value = "正在提交";
        setTimeout( () => {
            visible.value = false;
        }, 3000 )
    }
    const afterClose = () => {
        contentLoading.value = false;
        cancelDisabled.value = false;
        okDisabled.value = false;
        okLoading.value = false;
        okText.value = "提交";
    }
</script>

<style scoped>
    textarea {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: 4px;
        padding: 7px 10px;
        font-size: 14px;
        border: #dadada solid 1px;
        transition: .2s;
        resize: none;
    }
    textarea:hover, 
    textarea:focus {
        border-color: #09f;
    }
</style>

内容区域 loading 效果 ​

内容区域 loading 效果