Commit 36d24701325afe4874af14fc559d0445192dbaf5
1 parent
f4e25069
Radio w3c keyboard WIP
Showing
5 changed files
with
60 additions
and
8 deletions
Show diff stats
examples/routers/radio.vue
package.json
src/components/radio/radio-group.vue
| 1 | 1 | <template> |
| 2 | - <div :class="classes"> | |
| 2 | + <div | |
| 3 | + :class="classes" tabindex="0" | |
| 4 | + @keydown.left="onLeft" | |
| 5 | + @keydown.right="onRight" | |
| 6 | + @keydown.up="onUp" | |
| 7 | + @keydown.down="onDown" | |
| 8 | + @keydown.tab="onTab"> | |
| 3 | 9 | <slot></slot> |
| 4 | 10 | </div> |
| 5 | 11 | </template> |
| ... | ... | @@ -35,7 +41,8 @@ |
| 35 | 41 | data () { |
| 36 | 42 | return { |
| 37 | 43 | currentValue: this.value, |
| 38 | - childrens: [] | |
| 44 | + childrens: [], | |
| 45 | + preventDefaultTab: true | |
| 39 | 46 | }; |
| 40 | 47 | }, |
| 41 | 48 | computed: { |
| ... | ... | @@ -72,7 +79,52 @@ |
| 72 | 79 | this.$emit('input', data.value); |
| 73 | 80 | this.$emit('on-change', data.value); |
| 74 | 81 | this.dispatch('FormItem', 'on-form-change', data.value); |
| 75 | - } | |
| 82 | + }, | |
| 83 | + findRadio(value) { | |
| 84 | + return this.childrens && this.childrens.length ? this.childrens.find((child) => child.value === value) : undefined; | |
| 85 | + }, | |
| 86 | + findIndexRadio(value) { | |
| 87 | + return this.childrens && this.childrens.length ? this.childrens.findIndex((child) => child.value === value) : -1; | |
| 88 | + }, | |
| 89 | + includesRadio(value) { | |
| 90 | + return this.childrens && this.childrens.length ? this.childrens.includes((child) => child.value === value) : false; | |
| 91 | + }, | |
| 92 | + nextRadio() { | |
| 93 | + if (this.includesRadio(this.currentValue)) { | |
| 94 | + console.log('get next'); | |
| 95 | + } else { | |
| 96 | + return this.childrens && this.childrens.length ? this.childrens[0] : undefined; | |
| 97 | + } | |
| 98 | + }, | |
| 99 | + onLeft() { | |
| 100 | + console.log('left', this.currentValue); | |
| 101 | + }, | |
| 102 | + onRight() { | |
| 103 | + console.log('right', this.currentValue); | |
| 104 | + }, | |
| 105 | + onUp() { | |
| 106 | + console.log('up', this.currentValue); | |
| 107 | + }, | |
| 108 | + onDown() { | |
| 109 | + console.log('down', this.currentValue); | |
| 110 | + }, | |
| 111 | + onTab(event) { | |
| 112 | + if (!this.preventDefaultTab) { | |
| 113 | + return; | |
| 114 | + } | |
| 115 | + | |
| 116 | + event.preventDefault(); | |
| 117 | + this.preventDefaultTab = false; | |
| 118 | + this.currentValue = this.nextRadio(); | |
| 119 | + if (this.currentValue) { | |
| 120 | + this.change({ | |
| 121 | + value: this.currentValue.label | |
| 122 | + }); | |
| 123 | + } | |
| 124 | + | |
| 125 | + console.log('tab', this); | |
| 126 | + | |
| 127 | + }, | |
| 76 | 128 | }, |
| 77 | 129 | watch: { |
| 78 | 130 | value () { | ... | ... |
src/components/radio/radio.vue