Spin 加载中

概述

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

使用指南

在.vue中引入组件

<script>
    import iSpin 'iview-mpvue/dist/components/spin/spin'
    export default {
        components: {
            'i-spin': iSpin
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/spin/style/css'

示例

<i-panel title="三种尺寸"></i-panel>
    <i-grid i-class="flex-layout">
        <i-grid-item i-class="item">
            <i-spin size="small"></i-spin>
        </i-grid-item>
        <i-grid-item i-class="item">
            <i-spin></i-spin>
        </i-grid-item>
        <i-grid-item i-class="item">
            <i-spin size="large"></i-spin>
        </i-grid-item>
    </i-grid>
  
    <i-panel title="居中固定"></i-panel>
  
    <div class="container">
        <i-spin fix="true"></i-spin>
    </div>
  
    <i-panel title="自定义内容"></i-panel>
  
    <i-grid i-class="flex-layout">
        <i-grid-item i-class="item">
          <i-spin :custom="true">加载中...</i-spin>
        </i-grid-item>
        <i-grid-item i-class="item">
            <i-spin :custom="true">
                <i-icon type="refresh" size="20" i-class="icon-load"></i-icon>
                <div>Loading</div>
            </i-spin>
        </i-grid-item>
        <i-grid-item i-class="item">
            <i-spin :custom="true">
                <view class="loading"></view>
            </i-spin>
        </i-grid-item>
    </i-grid>
  
    <i-panel title="切换显示状态"></i-panel>
  
    <div class="spin-article">
    <div class="title">登金陵凤凰台</div>
    <div class="name">李白</div>
    <div class="article">
        <div>凤凰台上凤凰游，凤去台空江自流。</div>
        <div>吴宫花草埋幽径，晋代衣冠成古丘。</div>
        <div>三山半落青天外，二水中分白鹭洲。</div>
        <div>总为浮云能蔽日，长安不见使人愁。</div>
    </div>
    
    <i-spin size="large" :fix="true" v-if="spinShow"></i-spin>
</div>

<div class="switch">
    <i-switch :value="switchs" @change="onSwitchChange"></i-switch>
</div>

export default {
    ....
    data() {
      return {
        spinShow: true,
        switchs: false
      }
    },
    methods: {
      onSwitchChange (evt) {
        const value = evt.value
        this.switchs = value
        this.spinShow = !value
      }
    }
}

API

Spin properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
size	大小，可选值为 large、small、default	String	default
fix	是否固定，需要父级有 relative 或 absolute	Boolean	false
custom	是否自定义加载中的样式	Boolean	false