Ajax栏(Ajax Bar)

Ajax Bar是一个组件，只要Ajax调用在进行中（不管使用的是哪个Ajax库），就会显示一个加载栏（如Youtube）。它也可以手动触发。

安装

编辑 /quasar.conf.js:

framework: {
  components: ['QAjaxBar']
}

只要此组件由Vue渲染，它将捕获所有的Ajax调用。

<q-ajax-bar />

最好的方法就是将它放在你的App根组件（如果你使用默认的Quasar模板，则为App.vue）：

<template>
  <div id="q-app">
    <router-view></router-view>
    <q-ajax-bar />
  </div>
</template>

重要
不要在您的应用程序中同时使用多个Ajax Bar组件。

Vue属性	类型	默认值	说明
`position`	String	‘top’	在哪里放置加载栏： ‘top’、’bottom’、’left’或’right’。
`size`	String	‘4px’	加载栏的厚度。
`color`	String	‘red’	Quasar调色板颜色之一。
`speed`	Number	250	加载栏更新其值的速度有多快（以毫秒为单位）。
`delay`	Number	1000	加载栏被触发并在显示它之前应该等待多少时间（以毫秒为单位）。
`reverse`	Boolean	`false`	反转加载栏的方向。

只有当你想要手动触发它时使用。 Ajax调用自动触发这些方法。

Vue方法	说明
`start()`	触发加载栏。
`stop()`	通知一个事件已完成。

Vue事件	说明
`@start`	当加载栏被触发显示时触发此事件。
`@stop`	加载栏完成工作并被隐藏后触发此事件。

如果使用Ajax Bar同时捕获多个事件，则只会触发一次“@start”和“@stop”：加载栏开始显示以及隐藏时。

每个Ajax调用在触发时都会进行“start()”调用。当它结束时，它会调用stop()。所以，如果你也手动触发Ajax Bar，你必须在每次新事件开始时调用start()，每次事件结束时调用stop()。 Ajax Bar知道可以同时处理多个事件。

提示框加载