blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

feat(Picker): add @picker-loading-icon-color var (#4787)

Browse Source
This commit is contained in:
neverland 2019-10-19 21:25:30 +08:00 committed by GitHub
parent 9945d93bde
commit 4c2cf8e2cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/loading/index.less
View File

@ -2,6 +2,7 @@
.van-loading { .van-loading {
position: relative; position: relative;
color: @loading-spinner-color;
font-size: 0; font-size: 0;
vertical-align: middle; vertical-align: middle;
@ -13,7 +14,6 @@
max-width: 100%; max-width: 100%;
height: @loading-spinner-size; height: @loading-spinner-size;
max-height: 100%; max-height: 100%;
color: @loading-spinner-color;
vertical-align: middle; vertical-align: middle;
animation: van-rotate @loading-spinner-animation-duration linear infinite; animation: van-rotate @loading-spinner-animation-duration linear infinite;

4
src/picker/index.js
View File

@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
import { preventDefault } from '../utils/dom/event'; import { preventDefault } from '../utils/dom/event';
import { deepClone } from '../utils/deep-clone'; import { deepClone } from '../utils/deep-clone';
import { pickerProps } from './shared'; import { pickerProps } from './shared';
import { BLUE, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant'; import { BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
import Loading from '../loading'; import Loading from '../loading';
import PickerColumn from './PickerColumn'; import PickerColumn from './PickerColumn';
@ -182,7 +182,7 @@ export default createComponent({
return ( return (
<div class={bem()}> <div class={bem()}>
{this.toolbarPosition === 'top' ? Toolbar : h()} {this.toolbarPosition === 'top' ? Toolbar : h()}
{this.loading ? <Loading class={bem('loading')} color={BLUE} /> : h()} {this.loading ? <Loading class={bem('loading')} /> : h()}
{this.slots('columns-top')} {this.slots('columns-top')}
<div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}> <div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
{columns.map((item, index) => ( {columns.map((item, index) => (

4
src/picker/index.less
View File

@ -48,10 +48,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: rgba(255, 255, 255, .9); color: @picker-loading-icon-color;
background-color: @picker-loading-mask-color;
} }
&__loading .van-loading,
&__frame { &__frame {
position: absolute; position: absolute;
top: 50%; top: 50%;

2
src/picker/test/__snapshots__/demo.spec.js.snap
View File

@ -115,7 +115,7 @@ exports[`renders demo correctly 1`] = `
</div> </div>
<div> <div>
<div class="van-picker"> <div class="van-picker">
<div class="van-loading van-loading--circular van-picker__loading"><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--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><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-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1"> <div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">

2
src/style/var.less
View File

@ -461,6 +461,8 @@
@picker-option-font-size: @font-size-lg; @picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black; @picker-option-text-color: @black;
@picker-option-disabled-opacity: .3; @picker-option-disabled-opacity: .3;
@picker-loading-icon-color: @blue;
@picker-loading-mask-color: rgba(255, 255, 255, .9);
// Popup // Popup
@popup-background-color: @white; @popup-background-color: @white;

5
src/toast/index.less
View File

@ -62,10 +62,7 @@
&__loading { &__loading {
padding: @padding-base; padding: @padding-base;
color: @toast-loading-icon-color;
.van-loading__spinner {
color: @toast-loading-icon-color;
}
} }
&__text { &__text {