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属性

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

Vue方法

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

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

Vue事件

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

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

如何启动/停止工作

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