Fix closing image modal using esc

This commit is contained in:
AkiraFukushima 2018-08-30 22:09:09 +09:00
parent 84acf1068f
commit 343bffc636
1 changed files with 8 additions and 6 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<transition name="image-viewer"> <transition name="image-viewer">
<div id="image" v-show="modalOpen" @click="close"> <div id="image" v-show="modalOpen" @click="close">
<div class="image-wrapper" @keyup.esc.exact="close" tabindex="-1" ref="wrapper"> <div class="image-wrapper" v-shortkey="modalOpen ? {close: ['esc']} : {}" @shortkey="closeHandle">
<div class="image-header"> <div class="image-header">
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button> <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div> </div>
@ -38,11 +38,6 @@ export default {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight'] return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight']
} }
}, },
updated () {
if (this.modalOpen) {
this.$refs.wrapper.focus()
}
},
methods: { methods: {
close () { close () {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal') this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
@ -52,6 +47,13 @@ export default {
}, },
incrementIndex () { incrementIndex () {
if (this.showRight) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex') if (this.showRight) this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
},
closeHandle (event) {
switch (event.srcKey) {
case 'close':
this.close()
break
}
} }
} }
} }