Quasar有一个名为QBtn的组件，它是一个带有一些额外有用功能的按钮。 例如，它有两种形状：矩形（默认）和圆形。 它还具有内嵌的material波纹效果（可以禁用）。

按钮组件还带有一个旋转器或者加载效果。 当应用程序执行可能会导致延迟时，您可能会使用它，并且您希望向用户提供关于该延迟的一些反馈。 使用时，只要用户单击按钮，该按钮将显示旋转动画。

当不是禁用状态或旋转时，一旦点击或轻击，QBtn就会发出“@click”事件。

QBtn API

用法

标准

自定义颜色

带图标

圆形

方形

自定义内容

设计

对齐

大小

填充（padding）

默认填充为“xs md”。但是，您可以使用padding属性自定义它：

进度相关

一些按钮动作涉及与服务器联系，因此是异步响应。 最好通知用户正在进行的后台处理，直到异步响应准备就绪为止。 QBtn通过loading属性提供了这种可能性。 此属性将显示QSpinner（默认情况下），而不显示按钮的图标和/或标签。 还可以使用自定义加载内容（不仅是文本或）。

如果您愿意，还可以通过使用附加的percentage属性以及您对进度按钮的了解，在按钮内显示确定的进度：

自定义波纹

连接到Vue Router

updated on v2.9+

你也可以延迟、取消或重定向导航，如下图所示。关于下面使用的@click事件的更深入描述，请参考页面顶部的QBtn API卡。

对于更复杂的用例，您还可以直接使用原生的Vue<router-link>组件包装QBtn。 这也使您有机会根据应用程序的当前路径来控制状态：

其它选项

Disable

控制表单提交按钮

当您有一个将表单输入提交到服务器的按钮（例如“保存”按钮）时，您通常会希望使用户能够通过按Enter键来提交表单。 如果您还希望向用户提供有关正在进行的保存过程的反馈，并防止用户反复按下该按钮，则需要该按钮显示加载微调器，并禁止其单击事件。 如果配置，QBtn允许此行为。