Loading 加载

示例

风格

可选的风格 ui 属性值:normal / strong / reverse

Normal
Strong
Reverse
在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-loading
    loading
    ui="normal"
  >
    Normal
  </veui-loading>
  <veui-loading
    loading
    ui="strong"
  >
    Strong
  </veui-loading>
  <veui-loading
    loading
    ui="reverse"
    class="reverse"
  >
    Reverse
  </veui-loading>
</article>
</template>

<script>
import { Loading } from 'veui'

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

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

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

尺寸

可选的尺寸 ui 属性值:s / m / l

s
m
l
s
m
l
s
m
l
在 GitHub 上编辑此页编辑
<template>
<article>
  <div class="container">
    <veui-loading
      loading
      ui="s"
    >
      s
    </veui-loading>
    <veui-loading
      loading
      ui="m"
    >
      m
    </veui-loading>
    <veui-loading
      loading
      ui="l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      loading
      ui="strong s"
    >
      s
    </veui-loading>
    <veui-loading
      loading
      ui="strong m"
    >
      m
    </veui-loading>
    <veui-loading
      loading
      ui="strong l"
    >
      l
    </veui-loading>
  </div>
  <div class="container">
    <veui-loading
      loading
      class="reverse"
      ui="reverse s"
    >
      s
    </veui-loading>
    <veui-loading
      loading
      class="reverse"
      ui="reverse m"
    >
      m
    </veui-loading>
    <veui-loading
      loading
      class="reverse"
      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;
}

.veui-loading {
  margin-left: 1em;
}

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

排列方式

可选的排列方式 ui 属性值:vertical

Horizontal
Vertical
在 GitHub 上编辑此页编辑
<template>
<article class="container">
  <veui-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;

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

自定义加载图标

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

Custom icon-star:
loading...
Custom icon-sync:
loading...
Custom icon-clockwise:
loading...
在 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

名称类型默认值描述
uistring=-

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

描述
strong加强样式。
reverse反白样式,用于深色背景。
vertical垂直排列样式。
s小尺寸样式。
m中尺寸样式。
l大尺寸样式。
loadingbooleanfalse是否处于加载状态。

插槽

名称描述
spinner加载图标。
default加载中提示文字。
在 GitHub 上编辑此页编辑