添加等待中组件

Tevin

2023-11-16 41855908a810b82e0ce030eceb9a5f8dd2dbbd10

添加等待中组件

 layout/waiting/CWaiting.vue

New file
@@ -0,0 +1,54 @@
/**
 * CWaiting - 等待中
 * @author Tevin
 */

<template>
    <AtModal
        class="c-waiting"
        v-show="isOpened"
        :isOpened="isOpened"
        :closeOnClickOverlay="false"
    >
        <AtModalContent>
            <AtActivityIndicator />
            <view
                class="title"
                v-if="title"
            >{{title}}</view>
            <view
                v-if="sub"
                class="sub m-text-warning"
            >{{sub}}</view>
        </AtModalContent>
    </AtModal>
</template>

<script>
import Taro from '@tarojs/taro';
import { AtModal, AtModalContent, AtActivityIndicator } from 'taro-ui-vue';
import './cWaiting.scss';

export default {
    name: 'CWaiting',
    components: {
        AtModal,
        AtModalContent,
        AtActivityIndicator,
    },
    props: {
        // 是否显示
        isOpened: Boolean,
        // 标题
        title: String,
        // 次标题
        sub: String,
        // 次标题颜色类型
        subType: {
            type: String,
            default: 'warning',
        },
    },
    methods: {},
};
</script>

 layout/waiting/cWaiting.scss

New file
@@ -0,0 +1,26 @@
/**
 * CWaiting
 * @author Tevin
 */

@import "../../common/sassMixin";

.c-waiting {
    text-align: center;
    .at-activity-indicator__body {
        margin: 0 auto;
        height: 90px;
        .at-loading,
        .at-loading__ring {
            width: 80px;
            height: 80px;
        }
    }
    .title {
        font-size: 38px;
        padding: 6px 0 0;
    }
    .sub {
        font-size: 34px;
    }
}

 layout/waiting/index.js

New file
@@ -0,0 +1,10 @@
/**
 * layout
 * @author Tevin
 */

import CWaiting from '@components/layout/waiting/CWaiting.vue';

export {
    CWaiting,
}