Commit 9e5c72833ef6c5c1bcbe596e946d2a3f15c04137

Authored by 梁灏
1 parent 518c639a

Revert "Revert "update Button & style""

This reverts commit 518c639ada3332204e71c342c9eb8f4e05a1daf3.
src/components/button/button.vue
@@ -3,9 +3,7 @@ @@ -3,9 +3,7 @@
3 :type="htmlType" 3 :type="htmlType"
4 :class="classes" 4 :class="classes"
5 :disabled="disabled" 5 :disabled="disabled"
6 - @blur="handleBlur"  
7 - @click="handleClick"  
8 - @focus="handleFocus"> 6 + @click="handleClick">
9 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> 7 <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
10 <Icon :type="icon" v-if="icon && !loading"></Icon> 8 <Icon :type="icon" v-if="icon && !loading"></Icon>
11 <span v-if="showSlot" ref="slot"><slot></slot></span> 9 <span v-if="showSlot" ref="slot"><slot></slot></span>
@@ -52,7 +50,6 @@ @@ -52,7 +50,6 @@
52 }, 50 },
53 data () { 51 data () {
54 return { 52 return {
55 - isFocused: false,  
56 showSlot: true 53 showSlot: true
57 }; 54 };
58 }, 55 },
@@ -66,22 +63,15 @@ @@ -66,22 +63,15 @@
66 [`${prefixCls}-${this.shape}`]: !!this.shape, 63 [`${prefixCls}-${this.shape}`]: !!this.shape,
67 [`${prefixCls}-${this.size}`]: !!this.size, 64 [`${prefixCls}-${this.size}`]: !!this.size,
68 [`${prefixCls}-loading`]: this.loading != null && this.loading, 65 [`${prefixCls}-loading`]: this.loading != null && this.loading,
69 - [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading),  
70 - [`${prefixCls}-focused`]: this.isFocused 66 + [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
71 } 67 }
72 ]; 68 ];
73 } 69 }
74 }, 70 },
75 methods: { 71 methods: {
76 - handleBlur () {  
77 - this.isFocused = false;  
78 - },  
79 handleClick (event) { 72 handleClick (event) {
80 this.$emit('click', event); 73 this.$emit('click', event);
81 - },  
82 - handleFocus () {  
83 - this.isFocused = true;  
84 - }, 74 + }
85 }, 75 },
86 mounted () { 76 mounted () {
87 this.showSlot = this.$slots.default !== undefined; 77 this.showSlot = this.$slots.default !== undefined;
src/styles/mixins/button.less
@@ -135,7 +135,7 @@ @@ -135,7 +135,7 @@
135 .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius); 135 .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
136 //transform: translate3d(0, 0, 0); 136 //transform: translate3d(0, 0, 0);
137 //transition: all @transition-time linear; 137 //transition: all @transition-time linear;
138 - transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear; 138 + transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
139 139
140 > .@{css-prefix-iconfont} { 140 > .@{css-prefix-iconfont} {
141 line-height: 1; 141 line-height: 1;
@@ -267,9 +267,7 @@ @@ -267,9 +267,7 @@
267 // Color 267 // Color
268 // for tabindex 268 // for tabindex
269 .active-btn-color(@color) { 269 .active-btn-color(@color) {
270 - transition: all @transition-time @ease-in-out;  
271 - &.@{btn-prefix-cls}-focused {  
272 - 270 + &:focus {
273 box-shadow: 0 0 0 2px fade(@color, 20%); 271 box-shadow: 0 0 0 2px fade(@color, 20%);
274 z-index: 1; 272 z-index: 1;
275 } 273 }