BPageLoading

提供模块内或页面的loading显示。

组件注册

import { BPageLoading } from '@fesjs/traction-widget';
app.use(BPageLoading);

代码演示

基础用法

type不传或者传normal时，可用于表格或者模块内加载状态
type参数为page时，loading图案于页面居中显示，用于整个页面加载状态

Play

<template>
    <div class="wrapper">
        <FSwitch v-model="val" @change="handleChange" class="switch">
            <template #active>page</template>
            <template #inactive>normal</template>
        </FSwitch>
        <BPageLoading :type="type"></BPageLoading>
    </div>
</template>
<script setup lang="ts">
import { FSwitch } from '@fesjs/fes-design';
import { ref } from 'vue';
import { BPageLoading } from '@fesjs/traction-widget';

const type = ref('normal')
const val = ref(false);
const handleChange = (value: boolean) => {
    if(value) {
        type.value = 'page';
    } else {
        type.value = 'normal';
    }
};

</script>

<style>
.switch {
    position: relative;
    z-index: 999;
}
</style>

查看代码

不同状态的loding图

可以通过设置actionType设置不同状态的loading图，通过设置loadingText,设置loading时的文案展示，注意loadingText是一个对象，可以按自己需要设置某一个状态的提示语。

Play

<template>
    <div class="wrapper">
        <FSpace>
            <FRadioGroup v-model="actionType">
                <FRadio value="loading">loading</FRadio>
                <FRadio value="emptyInitResult">emptyInitResult</FRadio>
                <FRadio value="emptyQueryResult">emptyQueryResult</FRadio>
                <FRadio value="noPermissions">noPermissions</FRadio>
            </FRadioGroup>
        </FSpace>
        <FSpace
            style="margin: 20px 0;"
            vertical
        >
            loading: <FInput v-model="loadingText.loading"></FInput>
            emptyInitResult: <FInput v-model="loadingText.emptyInitResult"></FInput>
            emptyQueryResult: <FInput v-model="loadingText.emptyQueryResult"></FInput>
            noPermissions: <FInput v-model="loadingText.noPermissions"></FInput>
        </FSpace>
        <BPageLoading
            :actionType="actionType"
            :loadingText="loadingText"
            @logout="logout"
        ></BPageLoading>
    </div>
</template>
<script setup lang="ts">
import { FRadioGroup, FSpace, FRadio, FInput, FMessage } from '@fesjs/fes-design';
import { ref } from 'vue';
import { BPageLoading } from '@fesjs/traction-widget';

const actionType = ref()
const loadingText = ref({
    loading: 'Loading. . .',
    emptyInitResult: '这里还没有数据. . .',
    emptyQueryResult: '没有符合条件的结果. . .',
    noPermissions: '暂无权限'
})
const logout = () => {
    FMessage.info('logout');
}

</script>

<style>
.switch {
    position: relative;
    z-index: 999;
}
</style>

查看代码

参数说明

PageLoading Props

属性	说明	类型	默认值
type	类型，可选有'normal' 、 'page'	string	normal
actionType	类型，可选有'loading' 、 'emptyInitResult' 、 'emptyQueryResult'、'noPermissions'	string	'loading'
loadingText	对象，替换默认展示文案，会自动合并，不用每次替换所有的状态的展示文案	Object	`{loading: 'Loding. . .',emptyInitResult: '这里还没有数据. . .',emptyQueryResult: '没有符合条件的结果. . .',noPermissions: '暂无权限'}`
logout	事件，暂无权限时点击登出按钮触发的事件	Function	() => {}

BPageLoading #

组件注册 #

代码演示 #

基础用法 #

不同状态的loding图 #

参数说明 #

PageLoading Props #

BPageLoading

组件注册

代码演示

基础用法

不同状态的loding图

参数说明

PageLoading Props