Fes Design

Spin 加载中 ​

用于页面和区块的加载中状态。

组件注册 ​

js
import { FSpin } from '@fesjs/fes-design';

app.use(FSpin);

代码演示 ​

基础用法 ​

play
<template>
    <FSpace>
        <FSpin />
    </FSpace>
</template>

颜色 ​

play
<template>
    <FSpace>
        <FSpin stroke="#5384ff" />
        <FSpin stroke="#00cb91" />
        <FSpin stroke="#ff4d4f" />
        <FSpin stroke="#f29360" />
    </FSpace>
</template>

卡片加载中 ​

play
<template>
    <FSpace vertical>
        <FSwitch v-model="show" class="demo-switch">
            <template #active> 开 </template>
            <template #inactive> 关 </template>
        </FSwitch>
        <FSpin
            :show="show"
            :delay="200"
            style="width: 100%"
            description="加载中"
        >
            <f-table :data="data">
                <f-table-column prop="date" label="日期" />
                <f-table-column prop="name" label="姓名" />
                <f-table-column prop="address" label="地址" />
            </f-table>
        </FSpin>
    </FSpace>
</template>

<script>
import { reactive, ref } from 'vue';

export default {
    setup() {
        const data = reactive(
            Array.from([1, 2, 3], (i) => {
                return {
                    date: `2016-05-${i < 10 ? `0${i}` : i}`,
                    name: '王大虎',
                    address: '上海市普陀区金沙江路 1516 弄',
                };
            }),
        );
        const show = ref(false);
        return {
            data,
            show,
        };
    },
};
</script>

各种大小 ​

play
<template>
    <FSpace>
        <FSpin size="small" />
        <FSpin size="middle" />
        <FSpin size="large" />
    </FSpace>
</template>

Spin Props ​

属性说明类型默认值
size大小，可选有small、middle、largestringmiddle
description描述string-
stroke颜色string-
show是否显示booleantrue
delay延迟显示加载效果的时间, 单位为毫秒
（避免闪烁，如果是反馈交互操作产生的闪烁，是符合预期的）		number0

Spin Slots ​

名称说明
default如果填入，Spin 会包裹填入的内容
icon自定义加载图标
description描述信息