fixed Modal bug,when loading status changed,the button can not change status

fixed Modal bug,when loading status changed,the button can not change
status
This commit is contained in:
梁灏 2016-11-09 17:36:40 +08:00
parent 09a0430201
commit 3c01d81a11
22 changed files with 199 additions and 158 deletions

View file

@ -1 +1 @@
.ivu-article h1{font-size:28px}.ivu-article h2{font-size:22px}.ivu-article h3{font-size:18px}.ivu-article h4{font-size:14px}.ivu-article h5,.ivu-article h6{font-size:12px}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px} .ivu-article h1{font-size:26px;font-weight:400}.ivu-article h2{font-size:20px;font-weight:400}.ivu-article h3{font-size:16px;font-weight:400}.ivu-article h4{font-size:14px;font-weight:400}.ivu-article h5,.ivu-article h6{font-size:12px;font-weight:400}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px;font-size:14px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px;font-size:14px}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -199,6 +199,11 @@
this.wrapShow = true; this.wrapShow = true;
this.addScrollEffect(); this.addScrollEffect();
} }
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
} }
} }
} }

View file

@ -8,8 +8,7 @@
:disabled="disabled" :disabled="disabled"
:checked="selected" :checked="selected"
@change="change"> @change="change">
</span> </span><slot>{{ value }}</slot>
<slot>{{ value }}</slot>
</label> </label>
</template> </template>
<script> <script>

View file

@ -1,21 +1,27 @@
.ivu-article { .ivu-article {
h1{ h1{
font-size: 28px; font-size: 26px;
font-weight: normal;
} }
h2{ h2{
font-size: 22px; font-size: 20px;
font-weight: normal;
} }
h3{ h3{
font-size: 18px; font-size: 16px;
font-weight: normal;
} }
h4{ h4{
font-size: 14px; font-size: 14px;
font-weight: normal;
} }
h5{ h5{
font-size: 12px; font-size: 12px;
font-weight: normal;
} }
h6{ h6{
font-size: 12px; font-size: 12px;
font-weight: normal;
} }
blockquote{ blockquote{
@ -33,6 +39,7 @@
} }
li{ li{
margin-bottom: 5px; margin-bottom: 5px;
font-size: 14px;
} }
ul ul, ol ul{ ul ul, ol ul{
list-style-type: circle; list-style-type: circle;
@ -40,5 +47,6 @@
p{ p{
margin: 5px; margin: 5px;
font-size: 14px;
} }
} }

View file

@ -12,7 +12,7 @@
body { body {
font-family: @font-family; font-family: @font-family;
font-size: @font-size-base; font-size: @font-size-small;
line-height: @line-height-base; line-height: @line-height-base;
color: @text-color; color: @text-color;
background-color: @body-background; background-color: @body-background;
@ -64,7 +64,7 @@ a {
&[disabled] { &[disabled] {
color: #ccc; color: #ccc;
cursor: not-allowed; cursor: @cursor-disabled;
pointer-events: none; pointer-events: none;
} }
} }

View file

@ -6,7 +6,7 @@
padding: 8px 48px 8px 16px; padding: 8px 48px 8px 16px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
color: @text-color; color: @text-color;
font-size: 12px; font-size: @font-size-small;
line-height: 16px; line-height: 16px;
margin-bottom: 10px; margin-bottom: 10px;
@ -15,14 +15,14 @@
} }
&-icon { &-icon {
font-size: 14px; font-size: @font-size-base;
top: 8px; top: 8px;
left: 16px; left: 16px;
position: absolute; position: absolute;
} }
&-desc { &-desc {
font-size: 12px; font-size: @font-size-small;
color: @text-color; color: @text-color;
line-height: 21px; line-height: 21px;
display: none; display: none;

View file

@ -41,7 +41,7 @@
&-extra { &-extra {
position: absolute; position: absolute;
right: 16px; right: 16px;
top: 10px; top: 14px;
} }
&-body { &-body {

View file

@ -13,8 +13,8 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 80px; width: 80px;
height: 28px; height: @input-height-base;
line-height: 28px; line-height: @input-height-base;
vertical-align: middle; vertical-align: middle;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-radius: @btn-border-radius; border-radius: @btn-border-radius;
@ -53,7 +53,7 @@
&-handler { &-handler {
display: block; display: block;
width: 100%; width: 100%;
height: 14px; height: @input-height-base / 2;
line-height: 0; line-height: 0;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@ -93,13 +93,13 @@
&-input-wrap { &-input-wrap {
overflow: hidden; overflow: hidden;
height: 28px; height: @input-height-base;
} }
&-input { &-input {
width: 100%; width: 100%;
height: 28px; height: @input-height-base;
line-height: 28px; line-height: @input-height-base;
padding: 0 7px; padding: 0 7px;
text-align: left; text-align: left;
outline: 0; outline: 0;
@ -117,15 +117,15 @@
&-large { &-large {
padding: 0; padding: 0;
.@{input-number-prefix-cls}-input-wrap { .@{input-number-prefix-cls}-input-wrap {
height: 32px; height: @input-height-large;
} }
.@{input-number-prefix-cls}-handler { .@{input-number-prefix-cls}-handler {
height: 16px; height: @input-height-large / 2;
} }
input { input {
height: 32px; height: @input-height-large;
line-height: 32px; line-height: @input-height-large;
} }
.@{input-number-prefix-cls}-handler-up-inner { .@{input-number-prefix-cls}-handler-up-inner {
@ -139,15 +139,15 @@
&-small { &-small {
padding: 0; padding: 0;
.@{input-number-prefix-cls}-input-wrap { .@{input-number-prefix-cls}-input-wrap {
height: 22px; height: @input-height-small;
} }
.@{input-number-prefix-cls}-handler { .@{input-number-prefix-cls}-handler {
height: 11px; height: @input-height-small / 2;
} }
input { input {
height: 22px; height: @input-height-small;
line-height: 22px; line-height: @input-height-small;
margin-top: -1px; margin-top: -1px;
vertical-align: top; vertical-align: top;
} }

View file

@ -8,7 +8,7 @@
position: relative; position: relative;
} }
&-icon { &-icon {
width: 28px; width: 32px;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
@ -26,7 +26,7 @@
} }
&-icon + &{ &-icon + &{
padding-right: 28px; padding-right: 32px;
} }
} }

View file

@ -2,7 +2,7 @@
@icon-prefix-cls: ~"@{css-prefix}icon"; @icon-prefix-cls: ~"@{css-prefix}icon";
.@{message-prefix-cls} { .@{message-prefix-cls} {
font-size: 12px; font-size: @font-size-small;
position: fixed; position: fixed;
z-index: @zindex-message; z-index: @zindex-message;
width: 100%; width: 100%;

View file

@ -5,12 +5,12 @@
.@{radio-group-prefix-cls} { .@{radio-group-prefix-cls} {
display: inline-block; display: inline-block;
font-size: @font-size-base; font-size: @font-size-small;
} }
// 普通状态 // 普通状态
.@{radio-prefix-cls}-wrapper { .@{radio-prefix-cls}-wrapper {
font-size: @font-size-base; font-size: @font-size-small;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -19,9 +19,10 @@
} }
.@{radio-prefix-cls} { .@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap; white-space: nowrap;
outline: none; outline: none;
display: inline-block;
position: relative; position: relative;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
@ -124,19 +125,24 @@ span.@{radio-prefix-cls} + * {
font-size: 0; font-size: 0;
-webkit-text-size-adjust:none; -webkit-text-size-adjust:none;
.@{radio-prefix-cls}{
width: 0;
margin-right: 0;
}
.@{radio-prefix-cls}-wrapper { .@{radio-prefix-cls}-wrapper {
font-size: 14px;
margin: 0;
height: 28px;
line-height: 26px;
color: @btn-default-color;
display: inline-block; display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px;
font-size: @font-size-small;
color: @btn-default-color;
.transition(all @transition-time ease-in-out); .transition(all @transition-time ease-in-out);
cursor: pointer; cursor: pointer;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-left: 0; border-left: 0;
background: #fff; background: #fff;
padding: 0 16px;
> span { > span {
margin-left: 0; margin-left: 0;
@ -232,15 +238,16 @@ span.@{radio-prefix-cls} + * {
} }
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{ .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: 32px; height: @btn-circle-size-large;
line-height: 30px; line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
} }
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{ .@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
height: 22px; height: @btn-circle-size-small;
line-height: 20px; line-height: @btn-circle-size-small - 2px;
padding: 0 12px; padding: 0 12px;
font-size: 12px; font-size: @font-size-small;
&:first-child { &:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small; border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
} }

View file

@ -80,7 +80,7 @@
} }
&-single &-selection{ &-single &-selection{
height: 28px; height: @input-height-base;
position: relative; position: relative;
.@{select-prefix-cls}-placeholder{ .@{select-prefix-cls}-placeholder{
@ -89,8 +89,8 @@
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
display: block; display: block;
height: 26px; height: @input-height-base - 2px;
line-height: 26px; line-height: @input-height-base - 2px;
font-size: @font-size-small; font-size: @font-size-small;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -101,33 +101,33 @@
} }
&-large&-single &-selection{ &-large&-single &-selection{
height: 36px; height: @input-height-large;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 34px; height: @input-height-large - 2px;
line-height: 34px; line-height: @input-height-large - 2px;
font-size: @font-size-base; font-size: @font-size-base;
} }
} }
&-small&-single &-selection{ &-small&-single &-selection{
height: 24px; height: @input-height-small;
border-radius: @btn-border-radius-small; border-radius: @btn-border-radius-small;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{ .@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 22px; height: @input-height-small - 2px;
line-height: 22px; line-height: @input-height-small - 2px;
} }
} }
&-multiple &-selection{ &-multiple &-selection{
padding: 0 24px 0 2px; padding: 0 24px 0 4px;
min-height: 28px; min-height: @input-height-base;
.@{select-prefix-cls}-placeholder{ .@{select-prefix-cls}-placeholder{
display: block; display: block;
height: 26px; height: @input-height-base - 2px;
line-height: 26px; line-height: @input-height-base - 2px;
color: @input-placeholder-color; color: @input-placeholder-color;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -168,8 +168,8 @@
} }
&-multiple &-input{ &-multiple &-input{
height: 25px; height: @input-height-base - 3px;
line-height: 28px; line-height: @input-height-base;
padding: 0 0 0 6px; padding: 0 0 0 6px;
} }
@ -177,6 +177,10 @@
text-align: center; text-align: center;
color: @btn-disable-color; color: @btn-disable-color;
} }
&-multiple .@{css-prefix}tag{
margin: 3px 4px 2px 0;
}
} }
.@{select-item-prefix-cls} { .@{select-item-prefix-cls} {

View file

@ -16,7 +16,7 @@
&-inner { &-inner {
color: #fff; color: #fff;
font-size: 12px; font-size: @font-size-small;
position: absolute; position: absolute;
left: 25px; left: 25px;

View file

@ -55,7 +55,7 @@
line-height: 1; line-height: 1;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
font-size: 14px; font-size: @font-size-base;
position: absolute; position: absolute;
left: -14px; left: -14px;
.transform(translateY(-50%)); .transform(translateY(-50%));
@ -63,9 +63,9 @@
&-content { &-content {
padding: 1px 1px 10px 24px; padding: 1px 1px 10px 24px;
font-size: @font-size-base; font-size: @font-size-small;
position: relative; position: relative;
top: -5px; top: -4px;
} }
&:last-child { &:last-child {

View file

@ -136,7 +136,7 @@
.@{checkbox-prefix-cls}-wrapper { .@{checkbox-prefix-cls}-wrapper {
cursor: pointer; cursor: pointer;
font-size: @font-size-base; font-size: @font-size-small;
display: inline-block; display: inline-block;
& + & { & + & {
margin-left: 8px; margin-left: 8px;
@ -145,7 +145,7 @@
.@{checkbox-prefix-cls}-wrapper + span, .@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span { .@{checkbox-prefix-cls} + span {
margin-left: 4px; //margin-left: 4px;
margin-right: 4px; margin-right: 4px;
} }

View file

@ -48,7 +48,7 @@
// Button // Button
@btn-font-weight : normal; @btn-font-weight : normal;
@btn-padding-base : 4px 15px; @btn-padding-base : 6px 15px;
@btn-padding-large : 6px 15px 7px 15px; @btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px; @btn-padding-small : 2px 7px;
@btn-font-size : 12px; @btn-font-size : 12px;
@ -72,7 +72,7 @@
@btn-ghost-bg : transparent; @btn-ghost-bg : transparent;
@btn-ghost-border : @border-color-base; @btn-ghost-border : @border-color-base;
@btn-circle-size : 28px; @btn-circle-size : 32px;
@btn-circle-size-large : 36px; @btn-circle-size-large : 36px;
@btn-circle-size-small : 24px; @btn-circle-size-small : 24px;
@ -84,7 +84,7 @@
@legend-color : #999; @legend-color : #999;
// Input // Input
@input-height-base : 28px; @input-height-base : 32px;
@input-height-large : 36px; @input-height-large : 36px;
@input-height-small : 24px; @input-height-small : 24px;

View file

@ -71,10 +71,13 @@
<i-option value="io">.io</i-option> <i-option value="io">.io</i-option>
</i-select> </i-select>
</i-input> </i-input>
<Input-number :value="2" size="small"></Input-number>
<Input-number :value="2"></Input-number>
<Input-number :value="2" size="large"></Input-number>
</div> </div>
</template> </template>
<script> <script>
import { iInput, Icon, iButton, iSelect, iOption } from 'iview'; import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
export default { export default {
components: { components: {
@ -82,7 +85,8 @@
Icon, Icon,
iButton, iButton,
iSelect, iSelect,
iOption iOption,
InputNumber
}, },
props: { props: {

View file

@ -55,73 +55,77 @@
当鼠标经过这段文字时会显示一个气泡框 当鼠标经过这段文字时会显示一个气泡框
</Tooltip> </Tooltip>
<div class="tooltip_out"> <div class="tooltip_out">
<!--<Tooltip placement="top" content="Tooltip 文字提示">-->
<Poptip trigger="hover" title="提示标题" content="提示内容"> <!--<strong>-->
<i-button>hover 激活</i-button> <!--<a>Link</a>-->
</Poptip> <!--</strong>-->
<Poptip content="提示内容" title="tip"> <!--</Tooltip>-->
<i-button>click 激活</i-button> <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
</Poptip> <!--<i-button>hover 激活</i-button>-->
<Poptip content="提示内容"> <!--</Poptip>-->
<div slot="title"><i>自定义标题</i></div> <!--<Poptip content="提示内容" title="tip">-->
<i-button>click 激活</i-button> <!--<i-button>click 激活</i-button>-->
</Poptip> <!--</Poptip>-->
<Tooltip class="tip" placement="left-start" trigger="hover"> <!--<Poptip content="提示内容">-->
<div class="tip-inner"> <!--<div slot="title"><i>自定义标题</i></div>-->
<Icon type="information"></Icon> <!--<i-button>click 激活</i-button>-->
</div> <!--</Poptip>-->
<div class="tip-content" slot="content"> <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
<p>iView 最新版本为 0.9.7该版本对很多组件 UI 进行了调整</p> <!--<div class="tip-inner">-->
</div> <!--<Icon type="information"></Icon>-->
</Tooltip> <!--</div>-->
<Poptip> <!--<div class="tip-content" slot="content">-->
<a>click 激活</a> <!--<p>iView 最新版本为 0.9.7该版本对很多组件 UI 进行了调整</p>-->
<div slot="title"><i>自定义标题</i></div> <!--</div>-->
<div slot="content"> <!--</Tooltip>-->
<a>关闭提示框</a> <!--<Poptip>-->
</div> <!--<a>click 激活</a>-->
</Poptip> <!--<div slot="title"><i>自定义标题</i></div>-->
<Poptip placement="right" width="300"> <!--<div slot="content">-->
<i-button type="ghost">click 激活</i-button> <!--<a>关闭提示框</a>-->
<div class="api" slot="content"> <!--</div>-->
<table> <!--</Poptip>-->
<thead> <!--<Poptip placement="right" width="300">-->
<tr> <!--<i-button type="ghost">click 激活</i-button>-->
<th>属性</th> <!--<div class="api" slot="content">-->
<th>说明</th> <!--<table>-->
<th>类型</th> <!--<thead>-->
<th>默认值</th> <!--<tr>-->
</tr> <!--<th>属性</th>-->
</thead> <!--<th>说明</th>-->
<tbody> <!--<th>类型</th>-->
<tr> <!--<th>默认值</th>-->
<td>content</td> <!--</tr>-->
<td>显示的内容</td> <!--</thead>-->
<td>String | Number</td> <!--<tbody>-->
<td></td> <!--<tr>-->
</tr> <!--<td>content</td>-->
<tr> <!--<td>显示的内容</td>-->
<td>placement</td> <!--<td>String | Number</td>-->
<td>提示框出现的位置可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td> <!--<td></td>-->
<td>String</td> <!--</tr>-->
<td>bottom</td> <!--<tr>-->
</tr> <!--<td>placement</td>-->
<tr> <!--<td>提示框出现的位置可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
<td>disabled</td> <!--<td>String</td>-->
<td>是否禁用提示框</td> <!--<td>bottom</td>-->
<td>Boolean</td> <!--</tr>-->
<td>false</td> <!--<tr>-->
</tr> <!--<td>disabled</td>-->
<tr> <!--<td>是否禁用提示框</td>-->
<td>delay</td> <!--<td>Boolean</td>-->
<td>延迟显示单位毫秒</td> <!--<td>false</td>-->
<td>Number</td> <!--</tr>-->
<td>0</td> <!--<tr>-->
</tr> <!--<td>delay</td>-->
</tbody> <!--<td>延迟显示单位毫秒</td>-->
</table> <!--<td>Number</td>-->
</div> <!--<td>0</td>-->
</Poptip> <!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容">--> <!--<Poptip title="标题" content="内容">-->
<!--<Button>click 触发</Button>--> <!--<Button>click 触发</Button>-->
<!--</Poptip>--> <!--</Poptip>-->
@ -140,12 +144,12 @@
<!--<Tooltip content="这里是提示文字">--> <!--<Tooltip content="这里是提示文字">-->
<!--当鼠标经过这段文字时会显示一个气泡框--> <!--当鼠标经过这段文字时会显示一个气泡框-->
<!--</Tooltip>--> <!--</Tooltip>-->
<Poptip> <!--<Poptip>-->
<a>click 激活</a> <!--<a>click 激活</a>-->
<div slot="content"> <!--<div slot="content">-->
<a>关闭提示框</a> <!--<a>关闭提示框</a>-->
</div> <!--</div>-->
</Poptip> <!--</Poptip>-->
</div> </div>
</template> </template>
<script> <script>

View file

@ -54,18 +54,18 @@
value: 'shenzhen', value: 'shenzhen',
label: '深圳市' label: '深圳市'
}, },
{ // {
value: 'hangzhou', // value: 'hangzhou',
label: '杭州市' // label: ''
}, // },
{ // {
value: 'nanjing', // value: 'nanjing',
label: '南京市' // label: ''
}, // },
{ // {
value: 'chongqing', // value: 'chongqing',
label: '重庆市' // label: ''
} // }
], ],
model1: '', model1: '',
model10: [], model10: [],

View file

@ -31,10 +31,14 @@
<i-button type="primary" @click="modal1 = true">显示对话框</i-button> <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
<Modal <Modal
:visible.sync="modal1" :visible.sync="modal1"
title="普通的Modal对话框标题"> title="普通的Modal对话框标题"
:loading="loading" @on-ok="ok">
<p>对话框内容</p> <p>对话框内容</p>
<p>对话框内容</p> <p>对话框内容</p>
<p>对话框内容</p> <p>对话框内容</p>
{{ loading }}
<i-button @click="loading = true">true</i-button>
<i-button @click="loading = false">false</i-button>
</Modal> </Modal>
</template> </template>
<script> <script>
@ -43,7 +47,13 @@
components: { Tag, Modal, iButton }, components: { Tag, Modal, iButton },
data () { data () {
return { return {
modal1: false modal1: false,
loading: true
}
},
methods: {
ok () {
} }
} }
} }