Commit 4ba1df8187e64234332f91ff9ec10313db9b1a45
Committed by
GitHub
GitHub
Merge pull request #2833 from Xotic750/button_tabindex
Feature: Button tab navigation
Showing
2 changed files
with
22 additions
and
3 deletions
Show diff stats
src/components/button/button.vue
| 1 | <template> | 1 | <template> |
| 2 | - <button :type="htmlType" :class="classes" :disabled="disabled" @click="handleClick"> | 2 | + <button |
| 3 | + :type="htmlType" | ||
| 4 | + :class="classes" | ||
| 5 | + :disabled="disabled" | ||
| 6 | + @blur="handleBlur" | ||
| 7 | + @click="handleClick" | ||
| 8 | + @focus="handleFocus"> | ||
| 3 | <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> | 9 | <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> |
| 4 | <Icon :type="icon" v-if="icon && !loading"></Icon> | 10 | <Icon :type="icon" v-if="icon && !loading"></Icon> |
| 5 | <span v-if="showSlot" ref="slot"><slot></slot></span> | 11 | <span v-if="showSlot" ref="slot"><slot></slot></span> |
| @@ -46,6 +52,7 @@ | @@ -46,6 +52,7 @@ | ||
| 46 | }, | 52 | }, |
| 47 | data () { | 53 | data () { |
| 48 | return { | 54 | return { |
| 55 | + isFocused: false, | ||
| 49 | showSlot: true | 56 | showSlot: true |
| 50 | }; | 57 | }; |
| 51 | }, | 58 | }, |
| @@ -59,15 +66,22 @@ | @@ -59,15 +66,22 @@ | ||
| 59 | [`${prefixCls}-${this.shape}`]: !!this.shape, | 66 | [`${prefixCls}-${this.shape}`]: !!this.shape, |
| 60 | [`${prefixCls}-${this.size}`]: !!this.size, | 67 | [`${prefixCls}-${this.size}`]: !!this.size, |
| 61 | [`${prefixCls}-loading`]: this.loading != null && this.loading, | 68 | [`${prefixCls}-loading`]: this.loading != null && this.loading, |
| 62 | - [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading) | 69 | + [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading), |
| 70 | + [`${prefixCls}-focused`]: this.isFocused | ||
| 63 | } | 71 | } |
| 64 | ]; | 72 | ]; |
| 65 | } | 73 | } |
| 66 | }, | 74 | }, |
| 67 | methods: { | 75 | methods: { |
| 76 | + handleBlur () { | ||
| 77 | + this.isFocused = false; | ||
| 78 | + }, | ||
| 68 | handleClick (event) { | 79 | handleClick (event) { |
| 69 | this.$emit('click', event); | 80 | this.$emit('click', event); |
| 70 | - } | 81 | + }, |
| 82 | + handleFocus () { | ||
| 83 | + this.isFocused = true; | ||
| 84 | + }, | ||
| 71 | }, | 85 | }, |
| 72 | mounted () { | 86 | mounted () { |
| 73 | this.showSlot = this.$slots.default !== undefined; | 87 | this.showSlot = this.$slots.default !== undefined; |
src/styles/components/button.less
| @@ -4,6 +4,11 @@ | @@ -4,6 +4,11 @@ | ||
| 4 | .btn; | 4 | .btn; |
| 5 | .btn-default; | 5 | .btn-default; |
| 6 | 6 | ||
| 7 | + &.@{btn-prefix-cls}-focused { | ||
| 8 | + box-shadow: 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color, 0 0 2px @link-hover-color; | ||
| 9 | + z-index: 1; | ||
| 10 | + } | ||
| 11 | + | ||
| 7 | &-long{ | 12 | &-long{ |
| 8 | width: 100%; | 13 | width: 100%; |
| 9 | } | 14 | } |