小鹅通组件

# Loading 加载

加载数据时显示溜达鹅动效。

# 初始化

单独引入时：在入口js文件处引入

import Vue from 'vue';
import { Loading } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Loading)
// Vue.prototype.$loading = Loading
1
2
3
4
5

# 效果

# 区域加载

sense提供了两种调用 Loading 的方法：指令和服务。区域加载一般使用指令模式
对于自定义指令v-loading，只需要绑定Boolean即可。
默认状况下，Loading 遮罩会插入到绑定元素的子节点，可实现在表格等容器中加载数据时显示。

<table v-loading="loading">
</table>
<script>
export default {
  data() {
    return {
      loading: true
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11

# 自定义

指令模式可自定义加载文案、图标和背景色。
在绑定了v-loading指令的元素上添加loading-text属性，可以设置加载文案，默认显示在加载图标的下方。
类似地，loading-background属性用来设定背景色值；
loading-icon-width和loading-icon-height可以分别设置溜达鹅图标的宽高；
loading-spinner-class 可以传入style设置溜达鹅样式（例如固定溜达鹅距离顶部的高度等，可以避免绑定在不固定高度dom中的溜达鹅上下移动的问题）；
loading-custom-class 可以传入类名设置加载遮罩样式（业务侧中全屏加载时会遮住侧边栏，可以传入一个类设置left:XXpx避免）

<table
    v-loading="loading"
    loading-text="拼命加载中"
    loading-background="rgba(0, 0, 0, 0.8)"
    loading-spinner-class="top:200px"
    loading-custom-class="loading-mask">
</table>
<script>
export default {
  data() {
    return {
      loading: true
    }
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 全屏加载

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；
当使用服务方式时，遮罩默认即为全屏，无需额外设置。

指令方式 服务方式 
  <ss-button
    type="primary"
    @click="openFullScreen1"
    v-loading.fullscreen.lock="fullscreenLoading">
    指令方式
  </ss-button>
  <ss-button
    type="primary"
    @click="openFullScreen2">
    服务方式
  </ss-button>
  <script>
    export default {
      data() {
        return {
          fullscreenLoading: false
        }
      },
      methods: {
        openFullScreen1() {
          this.fullscreenLoading = true;
          setTimeout(() => {
            this.fullscreenLoading = false;
          }, 2000);
        },
        openFullScreen2() {
          const loading = Loading.service({
            lock: true,
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      }
    }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 服务方式

Loading 还可以以服务的方式调用，当使用服务方式时，默认为全屏加载。
引入 Loading 服务：

import { Loading } from '@xiaoe/sense'
1

在需要调用时：

Loading.service(options);
1

其中 options 参数为 Loading 的配置项（可以不传），具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

let loadingInstance = Loading.service(options);
this.$nextTick(() => {
  loadingInstance.close();
});
1
2
3
4

如果完整引入了sense，那么 Vue.prototype 上会有一个全局方法 $loading，同样会返回一个 Loading 实例，调用方式为：

this.$loading.service(options);
1

# 参数

参数 说明 类型 默认值 可选值
target 需要覆盖的DOM节点。可传入DOM对象或字符串 Object document.body -
fullscreen 同 v-loading 指令中的 fullscreen 修饰符 Boolean true true,false
lock 同 v-loading 指令中的 lock 修饰符 Boolean false true,false
text 提示文案 String - -
background 遮罩背景色 String rgba(255,255,255,.9) -
iconHeight 溜达鹅高度 Number 104 -
iconWidth 溜达鹅宽度 Number 84 -
customClass 遮罩层自定义类名(同loading-custom-class) String - -
spinnerClass 溜达鹅样式(同loading-spinner-class) String top:50% -

← Modal 弹框 →