diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index ff859f0d..884952e4 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -3,9 +3,7 @@
:type="htmlType"
:class="classes"
:disabled="disabled"
- @blur="handleBlur"
- @click="handleClick"
- @focus="handleFocus">
+ @click="handleClick">
@@ -52,7 +50,6 @@
},
data () {
return {
- isFocused: false,
showSlot: true
};
},
@@ -66,22 +63,15 @@
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading,
- [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading),
- [`${prefixCls}-focused`]: this.isFocused
+ [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}
];
}
},
methods: {
- handleBlur () {
- this.isFocused = false;
- },
handleClick (event) {
this.$emit('click', event);
- },
- handleFocus () {
- this.isFocused = true;
- },
+ }
},
mounted () {
this.showSlot = this.$slots.default !== undefined;
diff --git a/src/styles/mixins/button.less b/src/styles/mixins/button.less
index 930765a2..90053743 100644
--- a/src/styles/mixins/button.less
+++ b/src/styles/mixins/button.less
@@ -135,7 +135,7 @@
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
//transform: translate3d(0, 0, 0);
//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} {
line-height: 1;
@@ -267,9 +267,7 @@
// Color
// for tabindex
.active-btn-color(@color) {
- transition: all @transition-time @ease-in-out;
- &.@{btn-prefix-cls}-focused {
-
+ &:focus {
box-shadow: 0 0 0 2px fade(@color, 20%);
z-index: 1;
}