Fix closing image modal using esc
This commit is contained in:
parent
84acf1068f
commit
343bffc636
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue