微調(diào)器用于向用戶指示正在進行的進程。它們適用于不需要很長時間即可完成的操作，并且有助于提高應用程序的響應能力。請繼續(xù)閱讀，了解有關 Vue 引導組件及其提供的各種自定義選項的更多信息。

　　助推器 Vue 微調(diào)器組件(b 型微調(diào)器)

　　加速翻轉(zhuǎn) Vue 提供了用于創(chuàng)建微調(diào)器的組件。一旦它在頁面上呈現(xiàn)，它就會開始旋轉(zhuǎn)。b-spinner

　　邊框微調(diào)器

　　我們可以使用道具來顯示特定類型的微調(diào)器。默認情況下，設置為 ，這將使微調(diào)器透明，并為其提供粗圓邊框。typetypeborder

　　生長微調(diào)器

　　或者，我們可以設置為 使微調(diào)器反復增長到視圖中并淡出。typegrow

　　微調(diào)顏色

　　b-spinner附帶一個道具，可以讓我們自定義微調(diào)器的顏色。它可以采用一堆值，包括 、 、 、 、 和 。variant primary secondary danger warning success info

　　在這里，我們創(chuàng)建具有許多不同顏色的多個邊框微調(diào)器：

　　我們還可以使用道具自定義生長微調(diào)器的顏色：variant

　　對于更多顏色自定義選項，我們可以使用內(nèi)聯(lián)樣式設置 CSS 屬性。color

　　微調(diào)器尺寸

　　將 prop 設置為 on 將創(chuàng)建一個較小尺寸的微調(diào)器。smalltrueb-spinner

　　有關更多大小自定義選項，我們可以添加一些內(nèi)聯(lián)樣式來自定義 和 CSS 屬性。width height

　　微調(diào)器邊距

　　我們可以將任何引導 Vue 邊距實用程序類添加到 a 中，以調(diào)整其間距。在這里，我們使用 Bootstrap 中的類向第二個微調(diào)器添加左邊距：b-spinner ms-4

　　微調(diào)按鈕

　　微調(diào)器的一個很好的用途是在按鈕內(nèi)，以指示當前正在執(zhí)行操作。

　　下面是在按鈕中使用微調(diào)器的更實際示例。單擊按鈕進行保存時，它會更改其文本并顯示微調(diào)器以指示正在進行的保存操作(模擬超時)。然后，它會隱藏微調(diào)器，并在保存后再次更改文本。

　　我們使用 data 屬性來跟蹤當前的保存狀態(tài)，并創(chuàng)建一個計算屬性來確定按鈕標簽應該來自 什么。status buttonText status

　　結(jié)論

　　微調(diào)器可用于指示正在完成的應用操作。在本文中，我們學習了如何使用 Bootstrap Vue () 中的微調(diào)器組件輕松創(chuàng)建和自定義微調(diào)器。b-spinner