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