Merge pull request #7 from pdsuwwz/feature/on-change-fixed

🍎 Add change callback && Update README

README.md

@@ -25,32 +25,123 @@ import HocElementAffix from '@hoc-element/affix'
 Vue.use(HocElementAffix)
 ```
 
+## Feature
+
+- [x] 自定义顶部偏移量
+- [x] 固定状态改变时触发的回调
+- [x] 插槽式的固定状态反馈
+
 ## Using
 
-可选参数
+### 绑定参数 Attributes
 
 | 字段 | 说明 | 类型 | 默认值 |
 | -------- | -------- | -------- | -------- |
 | offsetTop | （可选）距离窗口顶部多少时开始固定 | Number | 0 |
 
+### 事件 Events
+
+| 字段 | 说明 | 类型 |
+| -------- | -------- | -------- |
+| change | （可选）固定状态发生改变时的回调函数 | Function |
+
+### 插槽数据 Slot
+
+绑定的数据默认在一个对象里，如需要可直接解构再使用
+
+| 字段 | 说明 | 类型 | 默认值 |
+| -------- | -------- | -------- | -------- |
+| affixed | （可选）实时的固定状态 | Boolean | false |
+
+
 ## Demo
 
+下面是比较全的例子，几乎囊括了 API 的所有用法，源码戳这： [Code](https://github.com/pdsuwwz/hoc-element-affix/tree/master/example/src/views/ExampleAffix.vue )
+
 ```html
 <template>
-  <div style="height: 200px; border: 1px solid #000;">占位</div>
-  <hoc-el-affix
-    :offsetTop="10"
-  >
-    <div class="demo"></div>
-  </hoc-el-affix>
+  <div class="box-container">
+    <div class="content">
+      <div class="long-list">
+        <div
+          v-for="(item, index) in 50"
+          :key="index"
+          class="long"
+        >
+          <template
+            v-if="index === 2"
+          >
+            <hoc-el-affix>
+              <template v-slot="{ affixed }">
+                <div class="box">
+                  <span style="font-size: 25px">{{ affixed ? '🍎' : '🍏' }}</span>
+                  吸顶【插槽版】
+                </div>
+              </template>
+            </hoc-el-affix>
+          </template>
+          <template
+            v-else-if="index === 9"
+          >
+            <hoc-el-affix
+              :offset-top="120"
+              @change="handleAffixed120"
+            >
+              <div class="box">
+                <span style="font-size: 25px">{{ isAffixed120 ? '🌝' : '🌚' }}</span>
+                距离顶部120px时固定【回调版】
+              </div>
+            </hoc-el-affix>
+          </template>
+          <template
+            v-else
+          >
+            {{ index === 49 ? '到底了' : `占位符${index + 1}` }}
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script>
+export default {
+  name: 'ExampleAffix',
+  data () {
+    return {
+      isAffixed120: false
+    }
+  },
+  methods: {
+    handleAffixed120 (affixed) {
+      this.isAffixed120 = affixed
+    }
+  }
+}
+</script>
+
 <style lang="scss" scoped>
-.demo {
-  width: 150px;
-  height: 300px;
-  border: 1px solid red;
+.box-container {
+  .content {
+    position: relative;
+    width: 300px;
+    margin: 0 auto;
+    text-align: center;
+    .box {
+      width: 300px;
+      height: 50px;
+      line-height: 50px;
+      border: 1px solid #000;
+    }
+    .long-list {
+      .long {
+        height: 50px;
+        line-height: 50px;
+        font-size: 16px;
+      }
+    }
+  }
 }
 </style>
-
 ```
 

example/src/views/ExampleAffix.vue

@@ -11,26 +11,31 @@
             v-if="index === 2"
           >
             <hoc-el-affix>
-              <div class="box">
-                吸顶
-              </div>
+              <template v-slot="{ affixed }">
+                <div class="box">
+                  <span style="font-size: 25px">{{ affixed ? '🍎' : '🍏' }}</span>
+                  吸顶【插槽版】
+                </div>
+              </template>
             </hoc-el-affix>
           </template>
           <template
-            v-else-if="index === 7"
+            v-else-if="index === 9"
           >
             <hoc-el-affix
               :offset-top="120"
+              @change="handleAffixed120"
             >
               <div class="box">
-                距离顶部120px时固定
+                <span style="font-size: 25px">{{ isAffixed120 ? '🌝' : '🌚' }}</span>
+                距离顶部120px时固定【回调版】
               </div>
             </hoc-el-affix>
           </template>
           <template
             v-else
           >
-            {{ index === 99 ? '到底了' : `占位符${index + 1}` }}
+            {{ index === 49 ? '到底了' : `占位符${index + 1}` }}
           </template>
         </div>
       </div>
@@ -40,7 +45,17 @@
 
 <script>
 export default {
-  name: 'ExampleAffix'
+  name: 'ExampleAffix',
+  data () {
+    return {
+      isAffixed120: false
+    }
+  },
+  methods: {
+    handleAffixed120 (affixed) {
+      this.isAffixed120 = affixed
+    }
+  }
 }
 </script>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoc-element/affix",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "lib/hoc-el-affix.js",
   "description": "📌 Affix 将页面元素固定在可视范围内。",
   "author": "Wisdom <pdsu.wwz@foxmail.com>",

src/components/ScrollAffix/index.vue

@@ -9,7 +9,11 @@
       :style="affixStyle"
       class="scroll-affix-container"
     >
-      <slot />
+      <slot
+        v-bind="{
+          affixed: getAffixed
+        }"
+      />
     </div>
   </div>
 </template>
@@ -43,6 +47,11 @@ export default {
       defaultInstancePosition: ''
     }
   },
+  computed: {
+    getAffixed () {
+      return this.affixStyle.position === 'fixed'
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       this.instance = this.$refs['scroll-affix']
@@ -74,6 +83,7 @@ export default {
         position: 'fixed',
         top: `${this.offsetTop}px`
       }
+      this.$emit('change', true)
     },
 
     // 用于设置实例在固定后的空白占位
@@ -98,7 +108,7 @@ export default {
     scrollListener () {
       const offsetTop = this.getInstanceRect().top
       // 当实例距离顶部的距离刚好接近(0px+设置的 top 距离)时，则立即固定
-      if (offsetTop <= this.offsetTop) {
+      if (offsetTop < this.offsetTop) {
         this.setFixedForInstance()
         this.setPlaceHolder()
       }
@@ -111,6 +121,7 @@ export default {
         this.affixStyle = {}
         this.showPlaceHolder = false
         this.stylePlaceHolder = {}
+        this.$emit('change', false)
       }
     }
   }

src/main.js

@@ -9,7 +9,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.1',
+  version: '0.1.2',
   install,
   HocElAffix
 }