Loading组件

指令模式

对于自定义指令v-loading只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加fullscreen修饰符，可以使遮罩插入至 DOM 中的 body 上。

默认样式

展示

---

在绑定了v-loading指令的元素上添加xiao-loading-text属性，其值会被渲染为加载文案， 并显示在加载图标的下方。类似地，xiao-loading-class、xiao-loading-color和 xiao-loading-background属性分别用来设定图标类名、图标色值和背景色值。

可配置

展示

<template>
  <div class="loading">
    <div class="loading__desc">
      对于自定义指令v-loading只需要绑定Boolean即可。默认状况下，Loading
      遮罩会插入到绑定元素的子节点，通过添加fullscreen修饰符，可以使遮罩插入至
      DOM 中的 body 上。
    </div>
    <div class="loading__container">
      <div v-loading="loading1" class="loading__container__item">默认样式</div>
      <div class="loading__container__button" @click="loading1 = !loading1">
        展示
      </div>
    </div>
    <hr style="margin: 20px 0" />
    <div class="loading__desc">
      在绑定了v-loading指令的元素上添加xiao-loading-text属性，其值会被渲染为加载文案，
      并显示在加载图标的下方。类似地，xiao-loading-class、xiao-loading-color和
      xiao-loading-background属性分别用来设定图标类名、图标色值和背景色值。
    </div>
    <div class="loading__container">
      <div
        v-loading="loading2"
        xiao-loading-color="#F52F3E"
        xiao-loading-class="xiao-icon-91jiazai"
        xiao-loading-text="玩命加载中..."
        xiao-loading-background="rgba(0,0,0,0.8)"
        xiao-loading-customClass="customClassXiao"
        class="loading__container__item"
      >
        可配置
      </div>
      <div class="loading__container__button" @click="loading2 = !loading2">
        展示
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loading',

  data() {
    return {
      loading1: false,
      loading2: false,
    }
  },
}
</script>

服务模式

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上）; 当使用服务方式时，遮罩默认即为全屏，无需额外设置。

指令模式

服务模式

<template>
  <div v-loading.fullscreen="fullscreenLoading">
    <div class="loading-demo__desc">
      当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body
      上）; 当使用服务方式时，遮罩默认即为全屏，无需额外设置。
    </div>
    <div class="loading-demo__buttons">
      <div class="loading-demo__buttons-items" @click="directive">指令模式</div>
      <div class="loading-demo__buttons-items" @click="service">服务模式</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Loading',

  data() {
    return {
      fullscreenLoading: false,
    }
  },
  methods: {
    directive() {
      this.fullscreenLoading = true
      setTimeout(() => {
        this.fullscreenLoading = false
      }, 3000)
    },
    service() {
      const serviceLoading = this.$loading()
      setTimeout(() => {
        serviceLoading.close()
      }, 3000)
    },
  },
}
</script>

Service Options

参数	说明	类型	默认值	可选值
target	Loading 需要覆盖的 DOM 节点。传入字符串，会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	string	body	-
loadingText	loading的加载文案	string	-	-
loadingClass	loading的图标类名	string	-	-
loadingColor	loading的颜色	string	-	-
loadingBackground	背景的颜色	string	-	-
loadingCustomClass	自定义类名	string	-	-
fullscreen	全屏loading	string	true	-