feat(Loading): use addUnit method (#1969)

This commit is contained in:
neverland 2019-09-05 20:59:31 +08:00 committed by GitHub
parent f0d32f08a0
commit 50478da7ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 23 deletions

View File

@ -29,14 +29,14 @@
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ----- | ----------------------------- | -------- | ---------- | |-----------|-----------|-----------|-------------|
| color | 颜色 | *string* | `#c9c9c9` | | color | 颜色 | *string* | `#c9c9c9` |
| type | 类型,可选值为 `spinner` | *string* | `circular` | | type | 类型,可选值为 `spinner` | *string* | `circular` |
| size | 加载图标大小,默认单位为 `px` | *string | number* | `30px` | | size | 加载图标大小,默认单位为 `px` | *string \| number* | `30px` |
### 外部样式类 ### 外部样式类
| 类名 | 说明 | | 类名 | 说明 |
| ------------ | ------------ | |-----------|-----------|
| custom-class | 根节点样式类 | | custom-class | 根节点样式类 |

View File

@ -1,14 +1,12 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { addUnit } from '../common/utils';
const defaultLoadingSize = '30px';
VantComponent({ VantComponent({
props: { props: {
size: { size: {
type: String, type: String,
value: defaultLoadingSize, observer: 'setSizeWithUnit'
observer: 'normalizeSize'
}, },
type: { type: {
type: String, type: String,
value: 'circular' value: 'circular'
@ -20,20 +18,13 @@ VantComponent({
}, },
data: { data: {
loadingSize: defaultLoadingSize sizeWithUnit: '30px'
}, },
methods: { methods: {
// 支持 size="10" 和 size="10px" size="10rpx" 这些格式, 显然也不需要理会 size="abcpx" setSizeWithUnit(size: string | number): void {
normalizeSize(size: string | number): void { this.set({
const numberLike = (s: string) => !Number.isNaN(+s); sizeWithUnit: addUnit(size)
let loadingSize = size;
if (typeof size === 'number' || numberLike(size)) {
loadingSize = size + 'px';
}
this.setData({
loadingSize
}); });
} }
} }

View File

@ -1,6 +1,6 @@
<view <view
class="van-loading custom-class" class="van-loading custom-class"
style="width: {{ loadingSize }}; height: {{ loadingSize }}" style="width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
> >
<view <view
class="van-loading__spinner van-loading__spinner--{{ type }}" class="van-loading__spinner van-loading__spinner--{{ type }}"