Revert "Revert "update Button & style""
This reverts commit 518c639ada
.
This commit is contained in:
parent
518c639ada
commit
9e5c72833e
2 changed files with 5 additions and 17 deletions
|
@ -3,9 +3,7 @@
|
||||||
:type="htmlType"
|
:type="htmlType"
|
||||||
:class="classes"
|
:class="classes"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@blur="handleBlur"
|
@click="handleClick">
|
||||||
@click="handleClick"
|
|
||||||
@focus="handleFocus">
|
|
||||||
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
||||||
<Icon :type="icon" v-if="icon && !loading"></Icon>
|
<Icon :type="icon" v-if="icon && !loading"></Icon>
|
||||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||||
|
@ -52,7 +50,6 @@
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
isFocused: false,
|
|
||||||
showSlot: true
|
showSlot: true
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -66,22 +63,15 @@
|
||||||
[`${prefixCls}-${this.shape}`]: !!this.shape,
|
[`${prefixCls}-${this.shape}`]: !!this.shape,
|
||||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||||
[`${prefixCls}-loading`]: this.loading != null && this.loading,
|
[`${prefixCls}-loading`]: this.loading != null && this.loading,
|
||||||
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading),
|
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
|
||||||
[`${prefixCls}-focused`]: this.isFocused
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleBlur () {
|
|
||||||
this.isFocused = false;
|
|
||||||
},
|
|
||||||
handleClick (event) {
|
handleClick (event) {
|
||||||
this.$emit('click', event);
|
this.$emit('click', event);
|
||||||
},
|
}
|
||||||
handleFocus () {
|
|
||||||
this.isFocused = true;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.showSlot = this.$slots.default !== undefined;
|
this.showSlot = this.$slots.default !== undefined;
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
|
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
|
||||||
//transform: translate3d(0, 0, 0);
|
//transform: translate3d(0, 0, 0);
|
||||||
//transition: all @transition-time linear;
|
//transition: all @transition-time linear;
|
||||||
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear;
|
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
|
||||||
|
|
||||||
> .@{css-prefix-iconfont} {
|
> .@{css-prefix-iconfont} {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -267,9 +267,7 @@
|
||||||
// Color
|
// Color
|
||||||
// for tabindex
|
// for tabindex
|
||||||
.active-btn-color(@color) {
|
.active-btn-color(@color) {
|
||||||
transition: all @transition-time @ease-in-out;
|
&:focus {
|
||||||
&.@{btn-prefix-cls}-focused {
|
|
||||||
|
|
||||||
box-shadow: 0 0 0 2px fade(@color, 20%);
|
box-shadow: 0 0 0 2px fade(@color, 20%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue