新增区域加载中公共组件

Tevin

2022-02-22 568e137c3f2ae17f62b3b9ec9ebea37cb136bec0

新增区域加载中公共组件

 layout/loading/CLoading.vue

New file
@@ -0,0 +1,44 @@
/**
 * CLoading - 加载中状态
 * @author Tevin
 */

<template>
    <view
        class="c-loading"
        @tap="evt => handleGoTo()"
    >
        <AtActivityIndicator
            :isOpened="show"
            mode="center"
        ></AtActivityIndicator>
        <view
            class="c-loading-content"
            :class="show?'off':''"
        >
            <slot />
        </view>
    </view>
</template>

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

export default {
    name: 'CLoading',
    components: {
        AtActivityIndicator,
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
};
</script>

 layout/loading/cLoading.scss

New file
@@ -0,0 +1,27 @@
/**
 * CLoading
 * @author Tevin
 */

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

.c-loading {
    position: relative;
    .at-loading {
        width: 60px;
        height: 60px;
        .at-loading__ring {
            width: 60px;
            height: 60px;
            border-width: 2PX;
        }
    }
    .c-loading-content {
        opacity: 1;
        transition: opacity 0.1s;
        &.off {
            opacity: 0.35;
            transition: opacity 0.5s 0.1s;
        }
    }
}

 layout/loading/index.js

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

import CLoading from '@components/layout/loading/CLoading.vue';

export {
    CLoading,
}