blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs(Loading): add size prop demo

Browse Source
This commit is contained in:
陈嘉涵 2020-01-24 10:12:19 +08:00
parent fde1ed11d4
commit e8f528877f
6 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/button/README.zh-CN.md
View File

@ -138,7 +138,7 @@ Vue.use(Button);
| hairline | 是否使用 0.5px 边框 | *boolean* | `false` |
| loading | 是否显示为加载状态 | *boolean* | `false` |
| loading-text | 加载状态提示文字 | *string* | - |
| loading-type | 加载图标类型，可选值为`spinner` | *string* | `circular` |
| loading-type | [加载图标类型](#/zh-CN/loading)，可选值为`spinner` | *string* | `circular` |
| loading-size | 加载图标大小 | *string* | `20px` |
| url | 点击后跳转的链接地址 | *string* | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - |

7
src/loading/README.md
View File

@ -25,6 +25,13 @@ Vue.use(Loading);
<van-loading type="spinner" color="#1989fa" />
```
### Size
```html
<van-loading size="24" />
<van-loading type="spinner" size="24px" />
```
### Text
```html

17
src/loading/README.zh-CN.md
View File

@ -13,6 +13,8 @@ Vue.use(Loading);
### 加载类型
通过`type`属性可以设置加载图标的类型，默认为`circular`，可选值为`spinner`
```html
<van-loading />
<van-loading type="spinner" />
@ -20,19 +22,34 @@ Vue.use(Loading);
### 自定义颜色
通过`color`属性设置加载图标的颜色
```html
<van-loading color="#1989fa" />
<van-loading type="spinner" color="#1989fa" />
```
### 自定义大小
通过`size`属性设置加载图标的大小，默认单位为`px`
```html
<van-loading size="24" />
<van-loading type="spinner" size="24px" />
```
### 加载文案
可以使用默认插槽在图标的右侧插入加载文案
```html
<van-loading size="24px">加载中...</van-loading>
```
### 垂直排列
设置`vertical`属性后，图标和文案会垂直排列
```html
<van-loading size="24px" vertical>加载中...</van-loading>
```

11
src/loading/demo/index.vue
View File

@ -10,6 +10,11 @@
<van-loading type="spinner" color="#1989fa" />
</demo-block>
<demo-block :title="$t('size')">
<van-loading size="24" />
<van-loading type="spinner" size="24" />
</demo-block>
<demo-block :title="$t('text')">
<van-loading size="24px">
{{ $t('loading') }}
@ -29,14 +34,16 @@ export default {
i18n: {
'zh-CN': {
type: '加载类型',
color: '自定义颜色',
text: '加载文案',
size: '自定义大小',
color: '自定义颜色',
vertical: '垂直排列',
},
'en-US': {
type: 'Type',
color: 'Color',
text: 'Text',
size: 'Size',
color: 'Color',
vertical: 'Vertical',
},
},

4
src/loading/test/__snapshots__/demo.spec.js.snap
View File

@ -10,6 +10,10 @@ exports[`renders demo correctly 1`] = `
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: rgb(25, 137, 250);"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
<div>
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 24px; height: 24px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
<div>
<div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text">
加载中...

2
src/toast/README.zh-CN.md
View File

@ -150,7 +150,7 @@ Toast.resetDefaultOptions('loading');
| forbidClick | 是否禁止背景点击 | *boolean* | `false` |
| closeOnClick `v2.1.5` | 是否在点击后关闭 | *boolean* | `false` |
| closeOnClickOverlay `v2.2.13` | 是否在点击遮罩层后关闭 | *boolean* | `false` |
| loadingType | 加载图标类型, 可选值为 `spinner` | *string* | `circular` |
| loadingType | [加载图标类型](#/zh-CN/loading), 可选值为 `spinner` | *string* | `circular` |
| duration | 展示时长(ms)，值为 0 时，toast 不会消失 | *number* | `2000` |
| className | 自定义类名 | *any* | - |
| onOpened | 完全展示后的回调函数 | *Function* | - |