Spin 加载中

概述

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

代码示例

Spin 加载中 - 图1

基础用法

最简单使用 Spin 的方法。

  1. <template>
  2. <Spin></Spin>
  3. </template>
  4. <script>
  5. export default {
  6. }
  7. </script>

Spin 加载中 - 图2

各种尺寸

通过设置size属性为largesmall将 Spin 设置为大和小尺寸,不设置为默认(中)尺寸。

  1. <template>
  2. <Spin size="small"></Spin>
  3. <Spin></Spin>
  4. <Spin size="large"></Spin>
  5. </template>
  6. <script>
  7. export default {
  8. }
  9. </script>

Spin 加载中 - 图3

居中固定

在容器内部垂直居中固定,需要父级有relativeabsolute

  1. <style>
  2. .demo-spin-container{
  3. display: inline-block;
  4. width: 200px;
  5. height: 100px;
  6. position: relative;
  7. border: 1px solid #eee;
  8. }
  9. </style>
  10. <template>
  11. <div class="demo-spin-container">
  12. <Spin fix></Spin>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. }
  18. </script>

Spin 加载中 - 图4

自定义内容

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

  1. <style>
  2. .demo-spin-icon-load{
  3. animation: ani-demo-spin 1s linear infinite;
  4. }
  5. @keyframes ani-demo-spin {
  6. from { transform: rotate(0deg);}
  7. 50% { transform: rotate(180deg);}
  8. to { transform: rotate(360deg);}
  9. }
  10. .demo-spin-col{
  11. height: 100px;
  12. position: relative;
  13. border: 1px solid #eee;
  14. }
  15. </style>
  16. <template>
  17. <Row>
  18. <Col class="demo-spin-col" span="8">
  19. <Spin fix>加载中...</Spin>
  20. </Col>
  21. <Col class="demo-spin-col" span="8">
  22. <Spin fix>
  23. <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
  24. <div>Loading</div>
  25. </Spin>
  26. </Col>
  27. <Col class="demo-spin-col" span="8">
  28. <Spin fix>
  29. <div class="loader">
  30. <svg class="circular" viewBox="25 25 50 50">
  31. <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
  32. </svg>
  33. </div>
  34. </Spin>
  35. </Col>
  36. </Row>
  37. </template>
  38. <script>
  39. // 部分样式代码冗长,未作展示
  40. export default {
  41. }
  42. </script>

Spin 加载中 - 图5

状态切换

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

<template>
    <div class="demo-spin-article">
        <h3>登金陵凤凰台</h3>
        <address>李白</address>
        <article>
            <p>凤凰台上凤凰游,凤去台空江自流。</p>
            <p>吴宫花草埋幽径,晋代衣冠成古丘。</p>
            <p>三山半落青天外,二水中分白鹭洲。</p>
            <p>总为浮云能蔽日,长安不见使人愁。</p>
        </article>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
    <br>
    切换显示状态:<i-switch @on-change="spinShow = !spinShow"></i-switch>
</template>
<script>
    export default {
        data () {
            return {
                spinShow: true
            }
        }
    }
</script>

Spin 加载中 - 图6

整页加载

使用内置的 $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>

API

Spin props

属性说明类型默认值
sizeSpin尺寸,可选值为largesmall或者不设置String-
fix是否固定,需要父级有relativeabsoluteBooleanfalse

Spin slot

名称说明
自定义 Spin 的内容,设置slot后,默认的样式不生效