feat(carousel): emit local event on pageChange (SSENSE#29)

cleverdango · Mar 3, 2017 · dd3ca55 · dd3ca55
1 parent b83b496
commit dd3ca55
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/play/index.js b/play/index.js
@@ -112,4 +112,28 @@ play("Carousel", module)
       h, containerWidth, [h('style', '.VueCarousel-navigation-button { font-size: 36px; }'), h(Carousel, { props: { paginationColor: '#fac232', paginationActiveColor: '#c9750c', navigationEnabled: true, navigationNextLabel: '👉', navigationPrevLabel: '👈' } }, generateSlideImages(h))]
     )
   )
+  .add("with local event on pageChange", {
+    template:
+      `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
+        <carousel style="width: 500px;" @pageChange="onPageChange">
+          <slide v-for="slide in slides">
+            <img style="width: 100%;" :src="slide" />
+          </slide>
+        </carousel>
+      </div>`,
+    components: {
+      Carousel,
+      Slide
+    },
+    data() {
+      return {
+        slides: images
+      }
+    },
+    methods: {
+      onPageChange(currentPage) {
+        this.$log(`page changed to ${currentPage}`)
+      },
+    }
+  })
 
diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -358,6 +358,7 @@
       goToPage(page) {
         if ((page >= 0) && (page <= this.pageCount)) {
           this.currentPage = page
+          this.$emit('pageChange', this.currentPage)
         }
       },
       /**