Use vue-shortkey in jump modal because sometimes jump modal is freeze

This commit is contained in:
AkiraFukushima 2018-08-08 21:32:38 +09:00
parent 6f4711b578
commit 3b8cb16ccc
1 changed files with 24 additions and 1 deletions

View File

@ -5,7 +5,14 @@
class="jump-modal"> class="jump-modal">
<el-form class="jump-form" v-on:submit.prevent="jump"> <el-form class="jump-form" v-on:submit.prevent="jump">
<div class="channel"> <div class="channel">
<input type="text" v-model="channel" placeholder="Jump to..." ref="channel" @keyup.enter.exact="jumpCurrentSelected" @keyup.down.exact="nextChannel" @keyup.up.exact="prevChannel" /> <input
type="text"
v-model="channel"
placeholder="Jump to..."
ref="channel"
v-shortkey="{next: ['arrowdown'], prev: ['arrowup'], select: ['enter']}"
@shortkey="handleKey"
/>
<ul class="channel-list"> <ul class="channel-list">
<li v-for="c in filterdChannel" :class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'" @click="jump(c)" @mouseover="changeSelected(c)">{{ c.name }}</li> <li v-for="c in filterdChannel" :class="c.name === selectedChannel.name ? 'channel-list-item selected' : 'channel-list-item'" @click="jump(c)" @mouseover="changeSelected(c)">{{ c.name }}</li>
</ul> </ul>
@ -93,10 +100,26 @@ export default {
this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', channel) this.$store.commit('TimelineSpace/Modals/Jump/changeSelected', channel)
}, },
jumpCurrentSelected () { jumpCurrentSelected () {
console.log('catch')
this.$store.dispatch('TimelineSpace/Modals/Jump/jumpCurrentSelected') this.$store.dispatch('TimelineSpace/Modals/Jump/jumpCurrentSelected')
}, },
jump (channel) { jump (channel) {
this.$store.dispatch('TimelineSpace/Modals/Jump/jump', channel) this.$store.dispatch('TimelineSpace/Modals/Jump/jump', channel)
},
handleKey (event) {
switch (event.srcKey) {
case 'next':
this.nextChannel()
break
case 'prev':
this.prevChannel()
break
case 'select':
this.jumpCurrentSelected()
break
default:
return true
}
} }
} }
} }