Loading 加载

加载数据时显示动效。

区域加载

在需要的时候展示加载动画，防止页面失去响应提高用户体验（例如表格）。

please loading...

学号	姓名	年龄	语文	数学	英语

1	Yjj	21	121	90	138
2	嘿毛	20	111	32	43
3	big龙	19	44	21	11
4	嫖瓜	21	80	40	45

Details

<template>
  <ALoading v-model="showLoading" title="please loading...">
    <a-table class="vp-raw" :data="tableData.tBody" :columns="tableData.tHead">
    </a-table>
  </ALoading>
</template>

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

const showLoading = ref(true);

const tableData = ({
    tHead: [
        {
            key: "id",
            title: "学号",
        },
        {
            key: "name",
            title: "姓名",
        },
        {
            key: "age",
            title: "年龄",
        },
        {
            key: "chinese",
            title: "语文",
        },
        {
            key: "math",
            title: "数学",
        },
        {
            key: "english",
            title: "英语",
        }
    ],
    tBody: [
        {
            id: 1,
            name: "Yjj",
            age: 21,
            chinese: 121,
            math: 90,
            english: 138,
        },
        {
            id: 2,
            name: "嘿毛",
            age: 20,
            chinese: 111,
            math: 32,
            english: 43,
        },
        {
            id: 3,
            name: "big龙",
            age: 19,
            chinese: 44,
            math: 21,
            english: 11,
        },
        {
            id: 4,
            name: "嫖瓜",
            age: 21,
            chinese: 80,
            math: 40,
            english: 45,
        },
    ],
}) as any;
</script>

全屏加载

传入global属性时加载数据时显示全屏动画。

please loading...

Details

<template>
    <AButton type="success" @click="showLoading">show global loading </AButton>   
     <ALoading v-model="loading" title="please loading..."></ALoading> 
</template>

<script lang="ts" setup>
import { AMessage } from 'amu-ui';
import { ref } from 'vue';

const loading = ref(false)
const showLoading = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false
    }, 2000);
};
</script>