Quasar 有一个名为 QBtn 的组件，它是一个带有一些额外实用功能的按钮。例如，它有两种形式：矩形（默认）和圆形。它还内置了 Material 的波纹效果（可以禁用）。
¥Quasar has a component called QBtn which is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled).
按钮组件还带有旋转或加载效果。当应用执行可能导致延迟，并且你希望向用户提供有关该延迟的一些反馈时，你会使用它。使用时，用户点击按钮后，按钮将显示旋转动画。
¥The button component also comes with a spinner or loading effect. You would use this for times when app execution may cause a delay and you want to give the user some feedback about that delay. When used, the button will display a spinning animation as soon as the user clicks the button.
当 QBtn 未被禁用或旋转时，只要被点击或轻触，它就会发出 @click 事件。
¥When not disabled or spinning, QBtn emits a @click event, as soon as it is clicked or tapped.
用法(Usage)
¥Usage
标准式(Standard)
¥Standard
自定义颜色(Custom colors)
¥Custom colors
带图标(With icon)
¥With icon
圆形(Round)
¥Round
方形(Square)
¥Square
自定义内容(Custom content)
¥Custom content
设计(Design)
¥Design
对齐(Alignment)
¥Alignment
尺寸(Size)
¥Size
填充(Padding)
¥Padding
默认填充为 “xs md”。但是，你可以使用 padding 属性来自定义它：
¥The default padding is “xs md”. However, you can use padding prop to customize it:
进度相关(Progress related)
¥Progress related
某些按钮操作需要连接服务器，因此需要异步响应。最好在异步响应准备就绪之前，告知用户后台进程正在进行中。QBtn 通过 loading 属性提供了此功能。此属性将显示 QSpinner（默认），而不是按钮的图标和/或标签。还可以使用自定义加载内容（不仅仅是文本或旋转按钮）。
¥Some button actions involve contacting a server, so an asynchronous response. It’s best that you inform the user about a background process taking place until the asynchronous response is ready. QBtn offers this possibility through the loading prop. This property will display a QSpinner (by default) instead of the icon and/or label of the button. Custom loading content can also be used (not only text or spinners).
你应该你还可以使用附加的 percentage 属性以及你已经了解的有关进度按钮的知识，在按钮内显示确定性的进度：
¥Should you wish, you can also display a deterministic progress within the button by using the additional percentage property along with what you’ve already learned about buttons with progress:
自定义波纹(Custom ripple)
¥Custom ripple
连接到 Vue Router 已更新至 v2.9+(Connecting to Vue Router updated on v2.9+)
¥Connecting to Vue Router
UMD 使用
如果你将使用
to和replace属性，请确保在项目中也注入 Vue Router（Quasar CLI 项目已提供此功能）。否则，请使用替代的href属性。¥If you will be using
to&replaceprops, make sure that you also inject Vue Router in your project (Quasar CLI projects have this out of the box). Otherwise use the alternativehrefprop.由于上述原因，下面的一些 QBtn 按钮在 Codepen/jsFiddle 中也无法使用。
¥Due to the above, some of the QBtn below won’t work in Codepen/jsFiddle too.
提示
如果可以，请优先使用 Vue Router props 而不是 href，因为使用 href 你将触发窗口导航，而不是页内 Vue Router 导航。
¥Prefer the Vue Router props over href when you can, because with href you will trigger a window navigation instead of an in-page Vue Router navigation.
你还可以延迟、取消或重定向导航，如下所示。有关下文所用 @click 事件的更深入描述，请参阅页面顶部的 QBtn API 卡片。
¥You can also delay, cancel or redirect navigation, as seen below. For a more in-depth description of the @click event being used below, please refer to QBtn API card at the top of the page.
对于更复杂的用例，你也可以直接使用原生 Vue <router-link> 组件来封装 QBtn。这也提供了根据应用当前路由控制状态的机会：
¥For more convoluted use-cases, you can also directly use the native Vue <router-link> component to wrap a QBtn. This also gives the opportunity to control the state according to app’s current route:
其他选项(Other options)
¥Other options
禁用(Disable)
¥Disable
控制表单提交按钮(Controlling the button for form submission)
¥Controlling the button for form submission
当你有一个按钮用于将表单的输入提交到服务器时，例如 “保存” 按钮，通常你还希望让用户能够通过按下 ENTER 键来提交表单。如果你还希望向用户提供保存过程正在进行的反馈，并防止用户重复按下按钮，你需要为按钮显示加载旋转图标，并禁用点击事件。如果配置了 QBtn，它允许此行为。
¥When you have a button to submit a form’s input to the server, like a “Save” button, more often than not you will also want to give the user the ability to submit the form with a press of the ENTER key. If you would also like to give the user feedback of the saving process being in progress, and to prevent the user repeatedly pressing the button, you would need the button to show a loading spinner and be disabled from click events. QBtn allows this behavior if configured so.
警告
当将类型为 “submit” 的 QBtn 放置在 QField、QInput 或 QSelect 的 “before”、“after”、“prepend” 或 “append” 插槽之一中时，你还应该在该 QBtn 上添加一个 @click 监听器。此监听器应调用提交表单的方法。此类插槽中的所有 “click” 事件都不会传播到其父元素。
¥When placing a QBtn with type “submit” in one of the “before”, “after”, “prepend”, or “append” slots of a QField, QInput or QSelect, you should also add a @click listener on the QBtn in question. This listener should call the method that submits your form. All “click” events in such slots are not propagated to their parent elements.