Quasar 有一个名为 QBtn 的组件，它是一个按钮，并具有一些额外的实用功能。例如，它有两种形状：矩形（默认）和圆形。它还内置了材质波纹效果（可以禁用）。
按钮组件还带有加载动画或加载效果。当应用程序执行可能导致延迟，并且您希望向用户提供有关该延迟的一些反馈时，您将使用此功能。使用时，一旦用户单击按钮，按钮将显示旋转动画。
在未禁用或旋转的情况下，QBtn 在单击或轻触后立即发出 @click 事件。
用法
标准
自定义颜色
带图标
圆形
方形
自定义内容
设计
对齐方式
尺寸
填充
默认填充为“xs md”。但是，您可以使用 padding 属性来自定义它
进度相关
某些按钮操作涉及联系服务器，因此为异步响应。最好是在异步响应准备就绪之前，通知用户正在进行后台进程。QBtn 通过 loading 属性提供了这种可能性。此属性将显示 QSpinner（默认情况下）而不是按钮的图标和/或标签。还可以使用自定义加载内容（不仅是文本或加载动画）。
如果需要，您还可以通过使用额外的 percentage 属性以及您已经了解的有关带进度的按钮的信息，在按钮中显示确定性进度
自定义波纹
连接到 Vue Routerv2.9+ 版本更新
UMD 用法
- 如果您将使用
to和replace属性，请确保您还在项目中注入了 Vue Router（Quasar CLI 项目默认包含此功能）。否则，请使用备用href属性。 - 由于上述原因，下面的一些 QBtn 在 Codepen/jsFiddle 中也不起作用。
提示
在您可以的情况下，优先使用 Vue Router 属性而不是 href，因为使用 href 将触发窗口导航而不是页面内的 Vue Router 导航。
您还可以延迟、取消或重定向导航，如下所示。有关下面使用的 @click 事件的更详细说明，请参阅页面顶部的 QBtn API 卡片。
对于更复杂的用例，您还可以直接使用原生 Vue <router-link> 组件来包装 QBtn。这也有机会根据应用程序的当前路由来控制状态
其他选项
禁用
控制按钮以提交表单
当您有一个按钮用于将表单输入提交到服务器（例如“保存”按钮）时，大多数情况下，您还希望允许用户按 Enter 键提交表单。如果您还想向用户提供保存过程正在进行的反馈，并防止用户重复按下按钮，则需要按钮显示加载动画并禁用点击事件。如果配置正确，QBtn 允许这种行为。
警告
当将类型为“submit”的 QBtn 放入 QField、QInput 或 QSelect 的“before”、“after”、“prepend”或“append”插槽之一时，您还应该在相关的 QBtn 上添加 @click 监听器。此监听器应调用提交表单的方法。此类插槽中的所有“click”事件都不会传播到其父元素。