Spin 加載中
加載中組件用於在頁面或區塊加載過程中顯示動畫效果,提示用戶等待。
基本用法
基本的加載中組件,有三種尺寸可選。
帶有描述文字
使用 description 屬性可以添加描述文字。
加載中...
正在處理...
自定義顏色
使用 stroke 屬性可以自定義加載圖標的顏色。
包裹內容
可以將 Spin 組件作為容器包裹其他元素,當 show 屬性為 true 時,顯示加載動畫並遮罩內容。
這是一個包含內容的 Spin 組件示例
當 Spin 處於活動狀態時,內容將被遮罩
延遲顯示
使用 delay 屬性可以設置延遲顯示加載效果的時間(毫秒),適用於防止閃爍。
這個示例設置了 500ms 的延遲
短時間的加載過程不會顯示加載動畫,避免閃爍
API
屬性
| 屬性名 | 說明 | 類型 | 默認值 |
|---|---|---|---|
| size | 組件大小,可選值為 small、medium、large 或數字 | string | number | medium |
| description | 描述文字 | string | - |
| rotate | 是否旋轉動畫 | boolean | true |
| show | 是否顯示加載中組件 | boolean | true |
| stroke | 加載圖標的顏色 | string | - |
| strokeWidth | 加載圖標的線條寬度 | number | 2 |
| delay | 延遲顯示加載效果的時間(毫秒) | number | 0 |
事件
| 事件名 | 說明 | 回調參數 |
|---|---|---|
| update:show | 當 show 屬性變化時觸發 | (value: boolean) |
插槽
| 插槽名 | 說明 |
|---|---|
| default | 自定義內容,當有默認插槽時,Spin 將作為包裹容器 |
| icon | 自定義加載圖標 |
| description | 自定義描述文字 |