Spin 加载中

当区块正在获取数据中时可使用，适当的等待动画可以提升用户体验。

基础用法

最简单使用 Spin 的方法。

各种尺寸

<template>
    <Spin size="small"></Spin>
    <Spin></Spin>
    <Spin size="large"></Spin>
</template>
<script>
    export default {
    }
</script>

居中固定

在容器内部垂直居中固定，需要父级有relative或absolute。

自定义内容

自定义 Spin 的内容，可以是简单的文字，也可以是很复杂的动画。

<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>
<template>
    <Row>
        <Col class="demo-spin-col" span="8">
            <Spin fix>加载中...</Spin>
        </Col>
        <Col class="demo-spin-col" span="8">
            <Spin fix>
                <div>Loading</div>
            </Spin>
        </Col>
        <Col class="demo-spin-col" span="8">
                <div class="loader">
                    <svg class="circular" viewBox="25 25 50 50">
                        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
                    </svg>
                </div>
            </Spin>
        </Col>
    </Row>
</template>
<script>
    // 部分样式代码冗长，未作展示
    export default {
</script>

控制 Spin 组件的显示和消失。

整页加载

使用内置的 $Spin 方法可以全局加载。

可以使用 Render 函数自定义显示内容。 学习 Render 函数的内容

<template>
    <div>
        <Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
        <Button type="primary" @click="handleSpinCustom">自定义显示内容</Button>
    </div>
</template>
<script>
    export default {
        methods: {
            handleSpinShow () {
                this.$Spin.show();
                setTimeout(() => {
                    this.$Spin.hide();
                }, 3000);
            },
            handleSpinCustom () {
                this.$Spin.show({
                    render: (h) => {
                        return h('div', [
                            h('Icon', {
                                'class': 'demo-spin-icon-load',
                                props: {
                                    type: 'ios-loading',
                                    size: 18
                                }
                            }),
                            h('div', 'Loading')
                        ])
                    }
                });
                setTimeout(() => {
                    this.$Spin.hide();
                }, 3000);
            }
        }
    }
</script>
<style>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>

Spin slot