Loading 加载

示例

风格

可供选用的风格 ui 属性值：normal / strong / reverse。

Normal

Strong

Reverse

<template>
<article>
  <veui-loading
    class="loading"
    loading
    ui="normal"
  >
    Normal
  </veui-loading>
  <veui-loading
    class="loading"
    loading
    ui="strong"
  >
    Strong
  </veui-loading>
  <veui-loading
    class="loading reverse"
    loading
    ui="reverse"
  >
    Reverse
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.loading {
  margin-left: 1em;
}

.reverse {
  background: #ccc;
  padding: 8px;
}
</style>

尺寸

可供选用的尺寸 ui 属性值：s / m / l。

在 GitHub 上编辑此示例编辑

<template>
<article>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading"
      loading
      ui="strong s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading"
      loading
      ui="strong l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse s"
    >
      s
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse m"
    >
      m
    </veui-loading>
    <veui-loading
      class="loading reverse"
      loading
      ui="reverse l"
    >
      l
    </veui-loading>
  </div>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.loading {
  margin-left: 1em;
}

.container {
  margin-bottom: 2em;
}
</style>

排列方式

可供选用的排列方式 ui 属性值：vertical。

Horizontal

Vertical

在 GitHub 上编辑此示例编辑

<template>
<article class="container">
  <veui-loading
    class="loading"
    loading
  >
    Horizontal
  </veui-loading>
  <veui-loading
    loading
    ui="vertical"
  >
    Vertical
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

export default {
  components: {
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  align-items: flex-end;

  .loading {
    margin-left: 1em;
  }
}
</style>

自定义加载图标

通过 spinner 插槽设置自定义加载图标。

Custom icon-star:

Custom icon-sync:

Custom icon-clockwise:

在 GitHub 上编辑此示例编辑

<template>
<article>
  <section>
    Custom icon-star:
    <veui-loading
      loading
      ui="strong"
    >
      <template #spinner>
        <veui-icon
          spin
          name="star"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-sync:
    <veui-loading loading>
      <template #spinner>
        <veui-icon
          spin
          name="sync"
        />
      </template>
      loading...
    </veui-loading>
  </section>
  <section>
    Custom icon-clockwise:
    <veui-loading
      loading
      ui="reverse"
      class="reverse"
    >
      <template #spinner>
        <veui-icon
          spin
          name="clockwise"
        />
      </template>
      loading...
    </veui-loading>
  </section>
</article>
</template>

<script>
import { Icon, Loading } from 'veui'
import 'veui-theme-dls-icons/sync'
import 'veui-theme-dls-icons/star'
import 'veui-theme-dls-icons/clockwise'

export default {
  components: {
    'veui-icon': Icon,
    'veui-loading': Loading
  }
}
</script>

<style lang="less" scoped>
.reverse {
  background: #ccc;
  padding: 8px;
}

.section {
  margin-bottom: 20px;
}
</style>

API

属性

名称类型默认值描述

ui

string

预设样式。为空格分隔的一组枚举值的组合。

值	描述
`strong`	加强样式。
`reverse`	反白样式，用于深色背景。
`vertical`	垂直排列样式。
`s`	小尺寸样式。
`m`	中尺寸样式。
`l`	大尺寸样式。

loading boolean false 是否处于加载状态。

插槽

名称	描述
`spinner`	加载图标。
`default`	加载中提示文字。

在 GitHub 上编辑此页面编辑