diff --git a/README.md b/README.md index 0b0e2b5..d3cbd96 100644 --- a/README.md +++ b/README.md @@ -71,12 +71,19 @@ With : `containerClass` must be used to override the `.progress-bar-container--container` default class. You can use the default `:class` syntax on the component to add classes if needed. +## Methods + +| key | description | type |function property| +|:--------|-------------------------|--------|-----------------| +|`onClick`|When clicked on scrollbar|Function| event object | + ## Events -|key|description| -|:---|---| -| `begin`|When scroll reached 0%| -|`complete`|When scroll reached 100%| +| key | event condition | return value | +|:---------|---------------------|-------------------------| +| `begin` | Scroll reached 0% | – | +|`complete`| Scroll reached 100% | – | +|`update` | Every scroll event | Scroll position (0-100) | ## Develop diff --git a/src/components/VueScrollProgressBar.vue b/src/components/VueScrollProgressBar.vue index 2f020b0..20f5e4b 100644 --- a/src/components/VueScrollProgressBar.vue +++ b/src/components/VueScrollProgressBar.vue @@ -5,6 +5,7 @@ background: containerColor, zIndex: zIndex }" + @click="onClick($event)" >
{} } }, @@ -69,6 +75,10 @@ export default { this.width = (window.scrollY / height) * 100 const eventWidth = Math.ceil(this.width) + if (this.emitUpdate) { + this.$emit("update", eventWidth) + } + if (eventWidth === 0) { this.$emit("begin") } @@ -79,12 +89,20 @@ export default { } }, + computed: { + emitUpdate () { + return Object.keys(this.$listeners).includes('update') + } + }, + mounted() { + window.addEventListener("resize", this.handleScroll) window.addEventListener("scroll", this.handleScroll) window.dispatchEvent(new Event("scroll")) }, destroyed() { + window.addEventListener("resize", this.handleScroll) window.removeEventListener("scroll", this.handleScroll) } }