Quasar 提供了一个名为 QBtn 的按钮组件，在普通按钮的基础上增加了许多实用功能。例如，它支持两种形状：矩形（默认）和圆形，还内置了 Material 风格的涟漪点击效果（可禁用）。

QBtn 组件还自带加载动画效果，适用于点击后需要等待服务器响应等耗时操作的场景——当用户点击按钮后，按钮会自动显示旋转加载动画，给用户一个明确的反馈。

当按钮未处于禁用或加载状态时，点击或轻触按钮会触发 @click 事件。

用法

标准按钮

自定义颜色

带图标

圆形

方形

自定义内容

样式设计

对齐方式

尺寸

内边距

默认内边距为 “xs md”，你可以通过 padding 属性来自定义：

进度相关

有些按钮操作需要与服务器通信，等待异步响应。这时最好让用户知道后台正在处理中。QBtn 通过 loading 属性提供了这个能力——设置该属性后，按钮会用 QSpinner（默认）替换原有的图标和/或文字来展示加载状态。你也可以自定义加载时显示的内容（不限于文字或旋转图标）。

如果你希望在按钮上展示确切的进度百分比，可以配合使用 percentage 属性：

自定义涟漪效果

连接 Vue Router

updated on v2.9+

你还可以延迟、取消或重定向导航，如下所示。关于下面示例中使用的 @click 事件的详细说明，请参阅页面顶部的 QBtn API 文档。

对于更复杂的场景，你也可以直接使用 Vue 原生的 <router-link> 组件来包裹 QBtn，这样还能根据当前路由状态来控制按钮的表现：

其他选项

禁用

控制表单提交按钮

当你需要一个按钮来提交表单数据到服务器时（比如"保存"按钮），通常还希望用户能通过按回车键来提交表单。同时，你可能还想在提交过程中显示加载动画，并阻止用户重复点击。QBtn 支持这些行为，只需进行相应配置即可。