加载动画

来源

ElementUI的Loading

• 基本用法
• 高级用法
  • 全屏加载
  • 配置选项
  • 加载控制
• 配置
  • 属性
  • 函数

基本用法

TIP

注意区别两种使用方法

• 指令

通过v-loading指令来设置当前标签的加载动画。

展示

代码

• 服务

通过this.$loading全局函数来加载动画。

展示

代码

高级用法

全屏加载

• 指令

展示

代码

• 服务

展示

代码

配置选项

• 指令

指令的配置主要通过指令传参的方式完成: v-loading:[options]

展示

代码

• 服务

展示

代码

this.$loading({
  target: this.$refs.loading,
  data: {
    text: "加载动画",
  },
});

加载控制

• 指令

直接通过控制loading变量的值即可控制加载与否。

this.loading = false;

• 服务

需要调用实例的close函数才可关闭。

let instance = this.$loading({
  target: this.$refs.loading,
  data:{
    text: "加载动画"
  }
});
setTimeout(()=>{
  instance.close();
},1500);

配置

属性

参数	信息	默认	必需	类型	可选值
text	加载时的文本内容	loading...	false	String	——
animeStyle	内置的加载动画样式	normal	false	String	normal/moon
spinner	自定义加载图标类	——	false	String	——
fontColor	文字颜色	——	false	String	——
bgColor	背景颜色	——	String	——	——

函数

实例上的成员函数

函数名	信息
close	关闭当前加载动画