[Affix] Add affix and affixed events.

uiv-lib · Oct 30, 2017 · 0f176da · 0f176da
1 parent 556cd55
commit 0f176da
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/docs/pages/components/Affix.md b/docs/pages/components/Affix.md
@@ -36,3 +36,10 @@ Name             | Type       | Default      | Required | Description
 Name      | Description
 --------- | -----------------------
 `default` | The affix body.
+
+### Events
+
+Name      | Description
+--------- | -----------------------
+`affix`   | This event fires immediately before the element has been affixed.
+`affixed` | This event is fired after the element has been affixed.
diff --git a/src/components/affix/Affix.vue b/src/components/affix/Affix.vue
@@ -48,21 +48,19 @@
         const body = document.body
         for (let type of ['Top', 'Left']) {
           let t = type.toLowerCase()
-          let ret = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset']
-          const method = 'scroll' + type
-          if (typeof ret !== 'number') {
-            // ie6,7,8 standard mode
-            ret = document.documentElement[method]
-            if (typeof ret !== 'number') {
-              // quirks mode
-              ret = document.body[method]
-            }
-          }
-          scroll[t] = ret
+          scroll[t] = window['page' + (type === 'Top' ? 'Y' : 'X') + 'Offset']
           element[t] = scroll[t] + rect[t] - (this.$el['client' + type] || body['client' + type] || 0)
         }
         let fix = scroll.top > element.top - this.offset
-        if (this.affixed !== fix) { this.affixed = fix }
+        if (this.affixed !== fix) {
+          this.affixed = fix
+          if (this.affixed) {
+            this.$emit('affix')
+            this.$nextTick(() => {
+              this.$emit('affixed')
+            })
+          }
+        }
       }
     }
   }

diff --git a/test/unit/specs/Affix.spec.js b/test/unit/specs/Affix.spec.js
@@ -39,6 +39,9 @@ describe('Affix', () => {
 
   it('should be able to toggle affix class', async () => {
     expect($el.find('.affix').length).to.equal(0)
+    window.scrollTo(0, 200)
+    await utils.sleep(200)
+    expect($el.find('.affix').length).to.equal(1)
     window.scrollTo(0, 500)
     await utils.sleep(200)
     expect($el.find('.affix').length).to.equal(1)
@@ -48,11 +51,18 @@ describe('Affix', () => {
   })
 
   it('should not toggle affix class if element is hidden', async () => {
+    let $body = $('html, body')
+    $body.css('height', '9999px')
     $el.css('display', 'none')
+    await vm.$nextTick()
     expect($el.find('.affix').length).to.equal(0)
     window.scrollTo(0, 500)
     await utils.sleep(200)
     expect($el.find('.affix').length).to.equal(0)
+    window.scrollTo(0, 0)
+    await utils.sleep(200)
+    expect($el.find('.affix').length).to.equal(0)
+    $body.css('height', '')
   })
 
   it('should be able to use offset', async () => {