feat: change Fixed status event

potato4d · Mar 3, 2019 · ccf1a98 · ccf1a98
1 parent 8f4f096
commit ccf1a98
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/ExampleApp.vue b/src/components/ExampleApp.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <VueFixedHeader
+      @change="updateFixedStatus"
       :threshold="propsData.threshold"
       :headerClass="propsData.headerClass"
       :fixedClass="propsData.fixedClass"
@@ -49,6 +50,9 @@
       <footer>
         <el-menu class="footer-content">
           <div class="flex-1"></div>
+          <el-menu-item class="fixed-footer__item" index="1">
+            <b> isFixed: {{ fixedStatus.headerIsFixed }} </b>
+          </el-menu-item>
           <el-menu-item class="fixed-footer__item" index="1">
             <b> threshold: {{ propsData.threshold }} </b>
           </el-menu-item>
@@ -80,11 +84,17 @@ export default Vue.extend({
   },
   data() {
     return {
+      fixedStatus: {
+        headerIsFixed: false
+      },
       propsData: { ...createData() },
       formData: { ...createData() }
     }
   },
   methods: {
+    updateFixedStatus(next: boolean) {
+      this.fixedStatus.headerIsFixed = next
+    },
     handleClickUpdate() {
       this.propsData = { ...this.formData }
     },

diff --git a/src/components/vue-fixed-header.tsx b/src/components/vue-fixed-header.tsx
@@ -48,6 +48,7 @@ export default Vue.extend({
         const { tag, qs, threshold } = this
         if (tag && this.isFixed !== qs(tag).scrollTop > threshold) {
           this.isFixed = qs(tag).scrollTop > threshold
+          this.$emit('change', this.isFixed)
           this.$forceUpdate()
         }
       }