close #288 fix image list arrow

This commit is contained in:
nasum 2018-05-11 17:27:33 +09:00
parent 27da363cda
commit 28d52fa6d8
2 changed files with 14 additions and 10 deletions

View File

@ -6,9 +6,9 @@
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div>
<div class="image-content">
<span class="button-area"><el-button type="text" v-show="!isFirst"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
<span class="button-area"><el-button type="text" v-show="showLeft"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
<img :src="imageURL">
<span class="button-area"><el-button type="text" v-show="!isLast"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
<span class="button-area"><el-button type="text" v-show="showRight"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
</div>
</div>
</div>
@ -27,11 +27,11 @@ export default {
imageURL () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
},
isFirst () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/isFirst']
showLeft () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/showLeft']
},
isLast () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/isLast']
showRight () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/showRight']
}
},
updated () {

View File

@ -44,11 +44,15 @@ const ImageViewer = {
imageURL (state) {
return state.mediaList[state.currentIndex]
},
isFirst (state) {
return state.currentIndex === 0 && state.mediaList.length > 1
showLeft (state) {
const notFirst = (state.currentIndex > 0)
const isManyItem = (state.mediaList.length > 1)
return (notFirst && isManyItem)
},
isLast (state) {
return state.currentIndex === (state.mediaList.length - 1) && state.mediaList.length > 1
showRight (state) {
const notLast = (state.currentIndex < (state.mediaList.length - 1))
const isManyItem = (state.mediaList.length > 1)
return (notLast && isManyItem)
}
}
}