Loading 加载

加载数据时显示动效。

基础用法

自定义指令 v-loading，只需要绑定 boolean 值即可。

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)
const activeNames = ref([])
</script>
<template>
  <div class="container" v-loading="isLoading">
    <x-collapse v-model="activeNames" accordion>
      <x-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </x-collapse-item>
      <x-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </x-collapse-item>
      <x-collapse-item title="Efficiency" name="3">
        <div>
          Simplify the process: keep operating process simple and intuitive;
        </div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the
          users can quickly understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps
          the users to identify and frees them from memorizing and recalling.
        </div>
      </x-collapse-item>
      <x-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do
          not make decisions for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to
          operate, including canceling, aborting or terminating current
          operation.
        </div>
      </x-collapse-item>
    </x-collapse>
  </div>
</template>

<style scoped>
.container {
  padding: 10px;
}
</style>

自定义加载中组件内容

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

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)
const activeNames = ref(['1', '2'])
</script>
<template>
  <div class="container">
    <x-collapse v-model="activeNames">
      <x-collapse-item
        title="Consistency"
        name="1"
        v-loading="isLoading"
        x-loading-text="Loading..."
        x-loading-spinner="circle-notch"
        x-loading-background="rgba(250, 250, 250, 0.8)"
      >
        <div>
          Consistent with real life: in line with the process and logic of real
          life, and comply with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such
          as: design style, icons and texts, position of elements, etc.
        </div>
      </x-collapse-item>
      <x-collapse-item title="Feedback" name="2" v-loading="isLoading">
        <div>
          Operation feedback: enable the users to clearly perceive their
          operations by style updates and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging
          elements of the page.
        </div>
      </x-collapse-item>
    </x-collapse>
  </div>
</template>

<style scoped>
:deep(.x-collapse-item) {
  padding: 10px;
}
</style>

全屏加载

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

<script setup>
import { ref } from 'vue'
import { XLoading } from 'x-anything'

const loading = ref(false)

function openLoading1() {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

function openLoading2() {
  const _loading = XLoading.service({
    lock: true,
    spinner: 'circle-notch',
    text: '加载中...',
    background: 'rgba(255,255,255,0.5)',
  })
  setTimeout(() => {
    _loading.close()
  }, 2000)
}
</script>

<template>
  <x-button
    v-loading.fullscreen.lock="loading"
    type="primary"
    @click="openLoading1"
  >
    As a directive
  </x-button>
  <x-button type="primary" @click="openLoading2"> As a service </x-button>
</template>

服务方式调用

服务方式调用，可以自定义遮罩的文案，也可以通过 close 方法关闭。

import { ErLoading } from 'eric-ui'

需要的时候通过以下方式调用

ErLoading.service(options)

LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它

const loading = ErLoading.service(options)
nextTick(() => {
  loading.close()
})

TIP

以服务的方式调用的全屏 Loading 是单例的。 若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例

Loading API

Options

Name	Description	Type	Default
target	遮罩绑定的目标元素	HTMLElement	document.body
fullscreen	是否为全屏遮罩	boolean	true
lock	是否锁定屏幕滚动	boolean	false
text	加载文案	string	--
spinner	加载图标	string	--
background	遮罩背景色	string	--

Directive

Name	Description	Type
v-loading	是否显示加载动画	boolean
x-loading-text	加载文案	string
x-loading-spinner	加载图标	string
x-loading-background	遮罩背景色	string