bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-loading-page/u-loading-page.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,115 @@
<template>
    <u-transition
        :show="loading"
        :custom-style="{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: bgColor,
            display: 'flex',
        }"
    >
        <view class="u-loading-page">
            <view class="u-loading-page__warpper">
                <view class="u-loading-page__warpper__loading-icon">
                    <image
                        v-if="image"
                        :src="image"
                        class="u-loading-page__warpper__loading-icon__img"
                        mode="widthFit"
                  :style="{
                     width: $u.addUnit(iconSize),
                      height: $u.addUnit(iconSize)
                  }"
                    ></image>
                    <u-loading-icon
                        v-else
                        :mode="loadingMode"
                        :size="$u.addUnit(iconSize)"
                        :color="loadingColor"
                    ></u-loading-icon>
                </view>
                <slot>
                    <text
                        class="u-loading-page__warpper__text"
                        :style="{
                            fontSize: $u.addUnit(fontSize),
                            color: color,
                        }"
                        >{{ loadingText }}</text
                    >
                </slot>
            </view>
        </view>
    </u-transition>
</template>

<script>
import props from "./props.js";
/**
 * loadingPage åŠ è½½åŠ¨ç”»
 * @description è­¦æ­¤ç»„件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
 * @tutorial https://www.uviewui.com/components/loading.html
 * @property {String | Number}   loadingText      æç¤ºå†…容  (默认 '正在加载' )
 * @property {String}         image         æ–‡å­—上方用于替换loading动画的图片
 * @property {String}         loadingMode      åŠ è½½åŠ¨ç”»çš„模式，circle-圆形，spinner-花朵形，semicircle-半圆形 ï¼ˆé»˜è®¤ 'circle' ï¼‰
 * @property {Boolean}         loading         æ˜¯å¦åŠ è½½ä¸­ ï¼ˆé»˜è®¤ false ï¼‰
 * @property {String}         bgColor         èƒŒæ™¯è‰² ï¼ˆé»˜è®¤ '#ffffff' ï¼‰
 * @property {String}         color         æ–‡å­—颜色 ï¼ˆé»˜è®¤ '#C8C8C8' ï¼‰
 * @property {String | Number}   fontSize      æ–‡å­—大小 ï¼ˆé»˜è®¤ 19 ï¼‰
 * @property {String | Number}   iconSize      å›¾æ ‡å¤§å° ï¼ˆé»˜è®¤ 28 ï¼‰
 * @property {String}         loadingColor   åŠ è½½ä¸­å›¾æ ‡çš„颜色，只能rgb或者十六进制颜色值 ï¼ˆé»˜è®¤ '#C8C8C8' ï¼‰
 * @property {Object}         customStyle      è‡ªå®šä¹‰æ ·å¼
 * @example <u-loading mode="circle"></u-loading>
 */
export default {
    name: "u-loading-page",
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
    data() {
        return {};
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

$text-color: rgb(200, 200, 200) !default;
$text-size: 19px !default;
$u-loading-icon-margin-bottom: 10px !default;

.u-loading-page {
    @include flex(column);
    flex: 1;
    align-items: center;
    justify-content: center;

    &__warpper {
        margin-top: -150px;
        justify-content: center;
        align-items: center;
        /* #ifndef APP-NVUE */
        color: $text-color;
        font-size: $text-size;
        /* #endif */
        @include flex(column);

        &__loading-icon {
            margin-bottom: $u-loading-icon-margin-bottom;

            &__img {
                width: 40px;
                height: 40px;
            }
        }

        &__text {
            font-size: $text-size;
            color: $text-color;
        }
    }
}
</style>