feat(Loading): optimize styles (#2216)

This commit is contained in:
neverland 2019-10-29 20:00:53 +08:00 committed by GitHub
parent 83597f5c86
commit 7cb9a4979d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 16 deletions

View File

@ -1,5 +1,10 @@
@import '../common/style/var.less'; @import '../common/style/var.less';
:host {
font-size: 0;
line-height: 1;
}
.van-loading { .van-loading {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

View File

@ -3,18 +3,15 @@ import { addUnit } from '../common/utils';
VantComponent({ VantComponent({
props: { props: {
color: String,
vertical: Boolean, vertical: Boolean,
size: {
type: String,
observer: 'setSizeWithUnit'
},
type: { type: {
type: String, type: String,
value: 'circular' value: 'circular'
}, },
color: { size: {
type: String, type: String,
value: '#c9c9c9' observer: 'setSizeWithUnit'
}, },
textSize: { textSize: {
type: String, type: String,
@ -22,11 +19,6 @@ VantComponent({
} }
}, },
data: {
sizeWithUnit: '30px',
textSizeWithUnit: '14px'
},
methods: { methods: {
setSizeWithUnit(size: string | number): void { setSizeWithUnit(size: string | number): void {
this.setData({ this.setData({

View File

@ -1,4 +1,4 @@
<view class="custom-class van-loading van-loading--{{ type }} {{ vertical ? 'van-loading--vertical' : '' }}"> <view class="custom-class van-loading {{ vertical ? 'van-loading--vertical' : '' }}">
<view <view
class="van-loading__spinner van-loading__spinner--{{ type }}" class="van-loading__spinner van-loading__spinner--{{ type }}"
style="color: {{ color }}; width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}" style="color: {{ color }}; width: {{ sizeWithUnit }}; height: {{ sizeWithUnit }}"
@ -10,10 +10,7 @@
class="van-loading__dot" class="van-loading__dot"
/> />
</view> </view>
<view <view class="van-loading__text" style="font-size: {{ textSizeWithUnit }};">
style="font-size: {{ textSizeWithUnit }};"
class="van-loading__text {{vertical ? 'van-loading__text--vertical' : ''}}"
>
<slot /> <slot />
</view> </view>
</view> </view>