mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-26 19:36:39 +08:00
feat(Loading): use addUnit method (#1969)
This commit is contained in:
parent
f0d32f08a0
commit
50478da7ef
@ -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 | 根节点样式类 |
|
||||||
|
@ -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
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 }}"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user