Loading
加载等待提示组件,一般用于加载等待等场景。
依赖
Mask
基本用法
this.$loading(options);
示例
<a href="javascript:;" @click="showLoading">Demo</a>
export default {
data(){
return{
loading:null
}
},
mounted(){
this.loading = this.$loading({
fade:true
});
},
methods:{
showLoading(){
this.loading.show();
},
hideLoading(){
this.loading.hide();
},
}
}
Options
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
mini | 迷你模式(非全屏),默认 | Boolean | true | — |
maxDuring | 最大展示时长 | Number | 0(0为不消失) | — |
bgColor | 遮罩层颜色 | String | mini模式:'rgba(0,0,0,.7)'非mini模式:'rgba(0,0,0,.5)' | 支持HEX、RGBA |
iconUrl | icon图片地址 | String | '' | — |
iconRotate | ICON无限旋转动画,mini模式默认开启 | Boolean | mini模式:true非mini模式:false | — |
text | 提示文字 | String | mini模式:''非mini模式:'加载中…' | — |
textColor | 文字颜色 | String | mini模式:'#FFFFFF'非mini模式:'#000000' | 支持HEX、RGBA |
fontSize | 文字大小,单位rem | Number/String | mini模式:0.22非mini模式:0.28 | 支持HEX、RGBA |
height | mini模式框体高度,单位rem | Number/String | 'auto' | — |
width | mini模式框体宽度,单位rem | Number/String | 'auto' | — |
borderRadius | mini模式圆角边框 | String | '10%' | — |
padding | mini模式内边距,单位rem | String | '0.3' | — |
fade | 是否开启渐隐渐现动效 | Boolean | false | — |
customClass | 增加一个自定义class | String | '' | — |