进度条（QProgress）

进度条用于显示正在进行的过程，因此即使系统在后台工作，用户也不会盯着静态页面。 对于等待长期操作完成的用户来说，这是一个很好的视觉指示器（即良好的用户体验）。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QProgress']
}

基本用法

<q-progress :percentage="progressModel" />

<!-- 缓冲; 4px高度看起来最好 -->
<q-progress
  :percentage="progressBuffer"
  :buffer="buffer"
  style="height: 4px"
/>

Vue属性

属性 类型 说明
percentage 数字 进度（百分比）。
buffer 数字 缓冲区（百分比）。
color 字符串 Quasar CSS颜色值。
stripe 布尔 如果设置为“true”，则进度条将被条纹化。
animate 布尔 如果设置为“true”，则进度条将变为动画。
indeterminate 布尔 如果设置为“true”，那么状态是不确定的，这意味着当进度停止时它是未知的。
height 字符串 用于QProgress高度的CSS单位。

Percentage和buffer是百分比值，必须介于0和100之间，percentage+buffer必须小于或等于100.如果percentage超出此范围，组件将解析它并使其位于这个区间。

对于颜色，请使用Quasar调色板中的一个。

例子：

<q-progress :percentage="progress" color="teal-4" />
<q-progress :percentage="progress" color="positive" />
<q-progress :percentage="progress" color="info" />
<q-progress :percentage="progress" color="warning" />

需要条纹，只需添加stripe属性。

例子：

<q-progress :percentage="progress" color="positive" stripe />
<q-progress :percentage="progress" color="info" stripe />
<q-progress :percentage="progress" color="warning" stripe />

需要缓冲，请使用buffer属性

<q-progress :percentage="progress" color="positive" stripe :buffer="buffer" />
<q-progress :percentage="progress" color="info" stripe :buffer="buffer" />
<q-progress :percentage="progress" color="warning" stripe :buffer="buffer" />

如果无法以百分比计算进度，请使用indeterminate属性。

<q-progress indeterminate />
<q-progress indeterminate color="positive" />
<q-progress indeterminate color="warning" />
<q-progress indeterminate color="negative" />

如果您想设置进度栏的特定高度，请将内联样式添加到组件：

<q-progress
  :percentage="progress"
  stripe
  animate
  height="45px"
/>

内部加载 旋转器