Commit 9e5c72833ef6c5c1bcbe596e946d2a3f15c04137
1 parent
518c639a
Revert "Revert "update Button & style""
This reverts commit 518c639ada3332204e71c342c9eb8f4e05a1daf3.
Showing
2 changed files
with
5 additions
and
17 deletions
Show diff stats
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 | } |