Quasar 有一個名為 QBtn 的元件，它是一個按鈕，帶有一些額外的實用功能。例如，它有兩種形狀：矩形（預設）和圓形。它還內建了 Material Ripple 效果（可以停用）。
這個按鈕元件也帶有載入指示器或載入效果。當應用程式執行可能導致延遲，並且您想要向使用者提供有關該延遲的回饋時，您可以使用它。使用時，只要使用者點擊按鈕，按鈕就會顯示旋轉動畫。
當未停用或未旋轉時，QBtn 會在點擊或點擊後立即發射 @click 事件。
用法
標準
自訂顏色
帶有圖示
圓形
方形
自訂內容
設計
對齊
尺寸
內距
預設內距為 “xs md”。但是，您可以使用 padding 屬性來自訂它
進度相關
某些按鈕操作涉及聯繫伺服器，因此是異步回應。最好告知使用者正在進行背景處理，直到異步回應準備就緒。QBtn 通過 loading 屬性提供了這種可能性。此屬性將顯示 QSpinner（預設），而不是按鈕的圖示和/或標籤。也可以使用自訂載入內容（不僅限於文字或載入指示器）。
如果您願意，您也可以通過使用額外的 percentage 屬性以及您已經了解的關於帶有進度的按鈕的知識，在按鈕內顯示確定性進度。
自訂 Ripple 效果
連接到 Vue Router在 v2.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」插槽之一中時，您還應該在相關的 @click 監聽器上新增 QBtn。此監聽器應調用提交表單的方法。此類插槽中的所有「click」事件都不會傳播到其父元素。