国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何在引導Vue中創建微調器

如何在引導Vue中創建微調器

來源:千鋒教育
發布人:syq
時間: 2022-09-14 15:33:15 1663140795

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

11

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

  加速翻轉 Vue 提供了用于創建微調器的組件。一旦它在頁面上呈現,它就會開始旋轉。b-spinner

12

  邊框微調器

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

13

  生長微調器

  或者,我們可以設置為 使微調器反復增長到視圖中并淡出。typegrow

14

  微調顏色

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

  在這里,我們創建具有許多不同顏色的多個邊框微調器:

15

  我們還可以使用道具自定義生長微調器的顏色:variant

16

  對于更多顏色自定義選項,我們可以使用內聯樣式設置 CSS 屬性。color

17

  微調器尺寸

  將 prop 設置為 on 將創建一個較小尺寸的微調器。smalltrueb-spinner

18

  有關更多大小自定義選項,我們可以添加一些內聯樣式來自定義 和 CSS 屬性。width height

19

  微調器邊距

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

20

  微調按鈕

  微調器的一個很好的用途是在按鈕內,以指示當前正在執行操作。

21

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

22

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

  結論

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

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT