Quasar 提供了一个名为 QBtn 的按钮组件，在普通按钮的基础上增加了许多实用功能。例如，它支持两种形状：矩形（默认）和圆形，还内置了 Material 风格的涟漪点击效果（可禁用）。
QBtn 组件还自带加载动画效果，适用于点击后需要等待服务器响应等耗时操作的场景——当用户点击按钮后，按钮会自动显示旋转加载动画，给用户一个明确的反馈。
当按钮未处于禁用或加载状态时，点击或轻触按钮会触发 @click 事件。
用法
标准按钮
自定义颜色
带图标
圆形
方形
自定义内容
样式设计
对齐方式
尺寸
内边距
默认内边距为 “xs md”，你可以通过 padding 属性来自定义：
进度相关
有些按钮操作需要与服务器通信，等待异步响应。这时最好让用户知道后台正在处理中。QBtn 通过 loading 属性提供了这个能力——设置该属性后，按钮会用 QSpinner（默认）替换原有的图标和/或文字来展示加载状态。你也可以自定义加载时显示的内容（不限于文字或旋转图标）。
如果你希望在按钮上展示确切的进度百分比，可以配合使用 percentage 属性：
自定义涟漪效果
连接 Vue Router updated on v2.9+
- 如果你要使用
to和replace属性，请确保项目中已引入 Vue Router（Quasar CLI 创建的项目默认已包含）。否则请改用href属性。 - 由于上述原因，下面部分 QBtn 示例在 Codepen/jsFiddle 中也无法正常运行。
尽量优先使用 Vue Router 相关属性（如 to）而非 href，因为 href 会触发浏览器的页面跳转，而非 Vue Router 的页内导航。
你还可以延迟、取消或重定向导航，如下所示。关于下面示例中使用的 @click 事件的详细说明，请参阅页面顶部的 QBtn API 文档。
对于更复杂的场景，你也可以直接使用 Vue 原生的 <router-link> 组件来包裹 QBtn，这样还能根据当前路由状态来控制按钮的表现：
其他选项
禁用
控制表单提交按钮
当你需要一个按钮来提交表单数据到服务器时（比如"保存"按钮），通常还希望用户能通过按回车键来提交表单。同时，你可能还想在提交过程中显示加载动画，并阻止用户重复点击。QBtn 支持这些行为，只需进行相应配置即可。
当你在 QField、QInput 或 QSelect 的 “before”、“after”、“prepend” 或 “append” 插槽中放置 type 为 “submit” 的 QBtn 时，还需要在该 QBtn 上添加 @click 监听器来调用表单提交方法。因为这些插槽中的点击事件不会冒泡到父元素。
无障碍访问 v2.25+
QBtn 渲染为原生 <button> 元素，或在作为链接时（href、to 或 type="a"）渲染为 <a>；如果链接按钮最终没有 href，则会获得 role="button" 以确保仍被播报为按钮。对于链接按钮，QBtn 还会合成 Space 键激活——原生 <a> 只响应 Enter——因此无论渲染为哪种标签，两个键都能正常工作。
在 disable 或 loading 状态下，按钮被标记为 aria-disabled="true" 并从 Tab 顺序中移除（禁用的非链接按钮还会获得原生 disabled 属性），加载中的按钮会吞掉所有交互直到状态稳定。当配合 percentage 属性加载时，按钮会将自身暴露为 progressbar 并通过 aria-valuenow 报告进度。
QBtn 没有专门的 aria-label 属性，但该属性会穿透到渲染的元素上——请务必为纯图标按钮（例如 round）提供 aria-label，否则它们没有无障碍名称。按钮内部的 QTooltip 并不能替代这一点：tooltip 会成为按钮的 描述（aria-describedby），而非名称，所以一个唯一文本来自 tooltip 的纯图标按钮仍然会被播报为未命名按钮。