Use vue-shortkey in jump modal because sometimes jump modal is freeze
This commit is contained in:
parent
6f4711b578
commit
3b8cb16ccc
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue