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.addScrollEffect();
}
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
}
}
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -71,10 +71,13 @@
<i-option value="io">.io</i-option>
</i-select>
</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>
</template>
<script>
import { iInput, Icon, iButton, iSelect, iOption } from 'iview';
import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
export default {
components: {
@ -82,7 +85,8 @@
Icon,
iButton,
iSelect,
iOption
iOption,
InputNumber
},
props: {

View file

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

View file

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

View file

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