W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
加載圖標(biāo),用于表示加載中的過渡狀態(tài)。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Loading } from 'vant';
const app = createApp();
app.use(Loading);
通過 ?type
? 屬性可以設(shè)置加載圖標(biāo)的類型,默認(rèn)為 ?circular
?,可選值為 ?spinner
?。
<van-loading />
<van-loading type="spinner" />
通過 ?color
? 屬性設(shè)置加載圖標(biāo)的顏色。
<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
通過 ?size
? 屬性設(shè)置加載圖標(biāo)的大小,默認(rèn)單位為 ?px
?。
<van-loading size="24" />
<van-loading type="spinner" size="24px" />
可以使用默認(rèn)插槽在圖標(biāo)的右側(cè)插入加載文案。
<van-loading size="24px">加載中...</van-loading>
設(shè)置 ?vertical
? 屬性后,圖標(biāo)和文案會垂直排列。
<van-loading size="24px" vertical>加載中...</van-loading>
通過 ?color
? 或者 ?text-color
? 屬性設(shè)置加載文案的顏色。
<!-- 可修改文案和加載圖標(biāo)的顏色 -->
<van-loading color="#0094ff" />
<!-- 只修改文案顏色 -->
<van-loading text-color="#0094ff" />
通過 ?icon
? 插槽可以自定義加載圖標(biāo)。
<van-loading vertical>
<template #icon>
<van-icon name="star-o" size="30" />
</template>
加載中...
</van-loading>
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
color | 顏色 | string | #c9c9c9
|
type | 類型,可選值為 spinner
|
string | circular
|
size | 加載圖標(biāo)大小,默認(rèn)單位為 px
|
number | string | 30px
|
text-size | 文字大小,默認(rèn)單位為 px
|
number | string | 14px
|
text-color | 文字顏色 | string | #c9c9c9
|
vertical | 是否垂直排列圖標(biāo)和文字內(nèi)容 | boolean | false
|
名稱 | 說明 |
---|---|
default | 加載文案 |
icon | 自定義加載圖標(biāo) |
組件導(dǎo)出以下類型定義:
import type { LoadingType, LoadingProps } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-loading-text-color | var(--van-text-color-2) | - |
--van-loading-text-font-size | var(--van-font-size-md) | - |
--van-loading-spinner-color | var(--van-gray-5) | - |
--van-loading-spinner-size | 30px | - |
--van-loading-spinner-duration | 0.8s | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: