| 1 |
- {"ast":null,"code":"export default {\n props: {\n images: {\n type: Array,\n required: true\n },\n pageSize: {\n type: Number,\n required: true\n },\n currentPage: {\n type: Number,\n required: true\n },\n currentBench: {\n type: Number | String\n }\n },\n computed: {\n paginatedImages() {\n const startIndex = (this.currentPage - 1) * this.pageSize;\n const endIndex = startIndex + this.pageSize;\n return this.images.slice(startIndex, endIndex);\n }\n },\n methods: {\n handleImageClick(index) {\n this.$emit(\"handleImageClick\", index);\n },\n prevPage() {\n this.$emit(\"prev-page\");\n },\n nextPage() {\n this.$emit(\"next-page\");\n }\n }\n};","map":{"version":3,"names":["props","images","type","Array","required","pageSize","Number","currentPage","currentBench","String","computed","paginatedImages","startIndex","endIndex","slice","methods","handleImageClick","index","$emit","prevPage","nextPage"],"sources":["src/views/ordinaryPage/components/ImageList/index.vue"],"sourcesContent":["<template>\n <div class=\"image-box\">\n <button @click=\"prevPage\" class=\"slide-right\"><div class=\"triangle\"></div></button>\n <transition-group name=\"slide\" mode=\"out-in\" class=\"image-list\">\n <div v-for=\"(image, index) in paginatedImages\" :key=\"index\" v-if=\"image.alt != currentBench\" class=\"image-item\" @click=\"handleImageClick(index)\">\n <img :src=\"image.url\" :alt=\"image.alt\">\n </div>\n </transition-group>\n <!-- <span>{{ currentPage }}</span> -->\n <button @click=\"nextPage\" class=\"slide-left\"><div style=\"transform: rotate(180deg)\" class=\"triangle\"></div></button>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n images: {\n type: Array,\n required: true\n },\n pageSize: {\n type: Number,\n required: true\n },\n currentPage: {\n type: Number,\n required: true\n },\n currentBench: {\n type: Number | String,\n }\n },\n computed: {\n paginatedImages() {\n const startIndex = (this.currentPage - 1) * this.pageSize;\n const endIndex = startIndex + this.pageSize;\n return this.images.slice(startIndex, endIndex);\n }\n },\n methods: {\n handleImageClick(index) {\n this.$emit(\"handleImageClick\", index);\n },\n prevPage() {\n this.$emit(\"prev-page\");\n },\n nextPage() {\n this.$emit(\"next-page\");\n }\n }\n};\n</script>\n\n<style>\n.image-box{\n display: flex;\n}\n.slide-right,.slide-left{\n width: 3.95vw;\n height: 100%;\n\n\n\n}\n.triangle {\n position: relative;\n width: 0;\n height: 0;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n border-right: 15px solid #CCCCCC;\n background: linear-gradient(to left, #FFFFFF, #CCCCCC);\n}\n\n.triangle::before {\n content: \"\";\n position: absolute;\n top: -15px;\n left: 15px;\n width: 0;\n height: 0;\n border-top: 15px solid transparent;\n border-bottom: 15px solid transparent;\n border-right: 15px solid #FFFFFF;\n transform: translateX(-100%);\n}\n.image-list {\n height: 100%;\n flex: 1;\n display: flex;\n justify-content: center;\n}\n\n.image-item {\n margin-right: 1.04vw;\n cursor: pointer;\n width: 9.79vw;\n height: 100%;\n border-radius: 0.78vw;\n}\n\n.image-item img {\n max-width: 100%;\n height: auto;\n}\n\n.slide-enter-active,\n.slide-leave-active {\n transition: transform 0.3s;\n}\n\n.slide-enter {\n transform: translateX(100%);\n}\n\n.slide-leave-to {\n transform: translateX(-100%);\n}\n\n.slide-right-enter-active,\n.slide-right-leave-active {\n transition: transform 0.3s;\n}\n\n.slide-right-enter {\n transform: translateX(-100%);\n}\n\n.slide-right-leave-to {\n transform: translateX(100%);\n}\n\n.slide-left-enter-active,\n.slide-left-leave-active {\n transition: transform 0.3s;\n}\n\n.slide-left-enter {\n transform: translateX(100%);\n}\n\n.slide-left-leave-to {\n transform: translateX(-100%);\n}\n</style>"],"mappings":"AAcA;EACAA,KAAA;IACAC,MAAA;MACAC,IAAA,EAAAC,KAAA;MACAC,QAAA;IACA;IACAC,QAAA;MACAH,IAAA,EAAAI,MAAA;MACAF,QAAA;IACA;IACAG,WAAA;MACAL,IAAA,EAAAI,MAAA;MACAF,QAAA;IACA;IACAI,YAAA;MACAN,IAAA,EAAAI,MAAA,GAAAG;IACA;EACA;EACAC,QAAA;IACAC,gBAAA;MACA,MAAAC,UAAA,SAAAL,WAAA,aAAAF,QAAA;MACA,MAAAQ,QAAA,GAAAD,UAAA,QAAAP,QAAA;MACA,YAAAJ,MAAA,CAAAa,KAAA,CAAAF,UAAA,EAAAC,QAAA;IACA;EACA;EACAE,OAAA;IACAC,iBAAAC,KAAA;MACA,KAAAC,KAAA,qBAAAD,KAAA;IACA;IACAE,SAAA;MACA,KAAAD,KAAA;IACA;IACAE,SAAA;MACA,KAAAF,KAAA;IACA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
