Loading


加载等待提示组件,一般用于加载等待等场景。

依赖
Mask
基本用法
  1. this.$loading(options);

示例
  1. <a href="javascript:;" @click="showLoading">Demo</a>

  1. export default {
  2. data(){
  3. return{
  4. loading:null
  5. }
  6. },
  7. mounted(){
  8. this.loading = this.$loading({
  9. fade:true
  10. });
  11. },
  12. methods:{
  13. showLoading(){
  14. this.loading.show();
  15. },
  16. hideLoading(){
  17. this.loading.hide();
  18. },
  19. }
  20. }

Options
参数说明类型默认值可选值
mini迷你模式(非全屏),默认Booleantrue
maxDuring最大展示时长Number0(0为不消失)
bgColor遮罩层颜色Stringmini模式:'rgba(0,0,0,.7)'非mini模式:'rgba(0,0,0,.5)'支持HEX、RGBA
iconUrlicon图片地址String''
iconRotateICON无限旋转动画,mini模式默认开启Booleanmini模式:true非mini模式:false
text提示文字Stringmini模式:''非mini模式:'加载中…'
textColor文字颜色Stringmini模式:'#FFFFFF'非mini模式:'#000000'支持HEX、RGBA
fontSize文字大小,单位remNumber/Stringmini模式:0.22非mini模式:0.28支持HEX、RGBA
heightmini模式框体高度,单位remNumber/String'auto'
widthmini模式框体宽度,单位remNumber/String'auto'
borderRadiusmini模式圆角边框String'10%'
paddingmini模式内边距,单位remString'0.3'
fade是否开启渐隐渐现动效Booleanfalse
customClass增加一个自定义classString''