使用用例

progress

使用 progress 参数控制进度条

<template>
  <GLoading class="gl-loading" :progress="50" />
</template>

显示代码

复制代码片段

stage & parts

使用 stage 和 parts 参数控制进度条

<template>
  <GLoading class="gl-loading" :stage="7 * 4" :parts="6 * 4 + 2" />
</template>

显示代码

复制代码片段

展示

<template>
  <GLoading class="gl-loading" :stage="7 * 4" :parts="parts" />
  <GButton class="w-200 mg-10 bk" type="shrink" icon="round" balance @click="onLoading">Loading</GButton>
</template>
<script setup>
  import { ref } from 'vue';

  const parts = ref(0)
  const timeout = ref(0)

  const waiting = [{
    wait: 0,
    parts: 0
  }, {
    wait: 100,
    parts: 1
  }, {
    wait: 1000,
    parts: 9
  },{
    wait: 500,
    parts: 14
  },{
    wait: 1000,
    parts: 26
  },{
    wait: 2500,
    parts: 28
  }]

  const onLoading = (i = 0) => {
    if (i === 0) clearTimeout(timeout)
    const time = waiting[i]
    if (time) {
      parts.value = time.parts
      timeout.value = setTimeout(() => {
        onLoading(i + 1)
      }, time.wait*5)
    }
  }
</script>

显示代码

复制代码片段

单元素Loading

<template>
  <GSingleLoading  />
  <GSingleLoading :size="80" :loop="1000" />
</template>

显示代码

复制代码片段

类型定义

defineProps<{
  progress: number
} & {
  stage: number  
  parts: number
}>()

参数定义

Loading

参数	说明	类型	是否可选	默认值
progress	进度条进度	number	必须	-
stage	把总进度分割成n块	number	必须	-
parts	进度条总进度	number	必须	-

参数定义

SingleLoading

参数	说明	类型	是否可选	默认值
loop	单个元素切换周期(毫秒)	number	可选	2000
size	元素大小	number	可选	60