LoadingBar 加载条

示例

尺寸

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

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

在 GitHub 上编辑此示例编辑
<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

属性

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

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

描述
xs超小尺寸样式。
s小尺寸样式。
m中尺寸样式。
loadingbooleanfalse是否处于加载状态。
在 GitHub 上编辑此页面编辑