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 | 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 | 9 | <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon> |
| 4 | 10 | <Icon :type="icon" v-if="icon && !loading"></Icon> |
| 5 | 11 | <span v-if="showSlot" ref="slot"><slot></slot></span> |
| ... | ... | @@ -46,6 +52,7 @@ |
| 46 | 52 | }, |
| 47 | 53 | data () { |
| 48 | 54 | return { |
| 55 | + isFocused: false, | |
| 49 | 56 | showSlot: true |
| 50 | 57 | }; |
| 51 | 58 | }, |
| ... | ... | @@ -59,15 +66,22 @@ |
| 59 | 66 | [`${prefixCls}-${this.shape}`]: !!this.shape, |
| 60 | 67 | [`${prefixCls}-${this.size}`]: !!this.size, |
| 61 | 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 | 75 | methods: { |
| 76 | + handleBlur () { | |
| 77 | + this.isFocused = false; | |
| 78 | + }, | |
| 68 | 79 | handleClick (event) { |
| 69 | 80 | this.$emit('click', event); |
| 70 | - } | |
| 81 | + }, | |
| 82 | + handleFocus () { | |
| 83 | + this.isFocused = true; | |
| 84 | + }, | |
| 71 | 85 | }, |
| 72 | 86 | mounted () { |
| 73 | 87 | this.showSlot = this.$slots.default !== undefined; | ... | ... |
src/styles/components/button.less