VEUI

LoadingBar 加载条

示例

尺寸

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

LoadingBar 组件目前只支持针对未知进度的加载状态提供假进度提示，类似 NProgress.js。

<template>
<article>
  <section>
    <veui-switch v-model="loading">
      Loading
    </veui-switch>
  </section>
  <section class="bars">
    <veui-loading-bar
      :loading="loading"
      ui="m"
    />
    <veui-loading-bar
      :loading="loading"
      ui="s"
    />
    <veui-loading-bar
      :loading="loading"
      ui="xs"
    />
  </section>
</article>
</template>

<script>
import { Switch, LoadingBar } from 'veui'

export default {
  components: {
    'veui-switch': Switch,
    'veui-loading-bar': LoadingBar
  },
  data () {
    return {
      loading: false
    }
  }
}
</script>

<style lang="less" scoped>
article,
.bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bars {
  width: 50%;
  height: 80px;
}
</style>

API

属性

名称类型默认值描述

ui

string

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

值	描述
`xs`	超小尺寸样式。
`s`	小尺寸样式。
`m`	中尺寸样式。

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

在 GitHub 上编辑此页面编辑