update Button & style

@xotic750 I update Button code, because just use :focus style can do it, so i removed some event.

update Button & style
@xotic750 I update Button code, because just use :focus style can do it, so i removed some event.
梁灏
1 parent 5568b2e8
Showing 2 changed files with 5 additions and 17 deletions Show diff stats
src/components/button/button.vue
src/styles/mixins/button.less
@@ -3,9 +3,7 @@
         :type="htmlType"
         :class="classes"
         :disabled="disabled"
-        @blur="handleBlur"
-        @click="handleClick"
-        @focus="handleFocus">
+        @click="handleClick">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
         <Icon :type="icon" v-if="icon && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -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;
@@ -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;
     }