FS-UI v0.1.33

Loading 加载

使用指南

import { Loading } from 'fs-ui'
export default {
  components: {
    Loading
  }
}
1
2
3
4
5
6

代码演示

  • 基本loading
<fs-loading/>
<fs-loading type="circular"/>
<fs-loading type="spinner"/>
1
2
3
  • 带背景的loading
<fs-loading color="white"/>
<fs-loading type="circular" color="white"/>
<fs-loading type="spinner" color="white"/>
1
2
3
  • 改变大小的loading
<fs-loading size="30px"/>
<fs-loading type="circular" size="30px"/>
<fs-loading type="spinner" size="30px"/>
<fs-loading size="30px" color="white"/>
<fs-loading type="circular" size="30px" color="white"/>
<fs-loading type="spinner" size="30px" color="white"/>
1
2
3
4
5
6
  • 带文字的loading
<fs-loading color="white" text="加载中..."/>
<fs-loading color="white" type="spinner" text="加载中..."/>
1
2
  • 自定义类名
<fs-loading className="self-loading"/>
1
  • 自定义内容
<fs-loading>
  <div slot="content">loading</div>
</fs-loading>
<fs-loading>
  <div slot="loading"><span>loading</span></div>
</fs-loading>
<fs-loading color="white" text="加载中...">
  <div slot="loading"><p style="color: white;">图片</p></div>
</fs-loading>
<fs-loading color="white" text="加载中...">
  <div slot="loading"><span style="color: white;">图片</span></div>
</fs-loading>
1
2
3
4
5
6
7
8
9
10
11
12

参数

参数 说明 类型 默认值
type 类型，可选值：default, spinner String default
color 颜色 String #808080
size 尺寸 String 46px
text 文本 String -
className 类名 String -

插槽

名称 说明
content 组件的内容完全自定义
loading 只替换组件loading图标的部分内容

← Toast 轻提示 →