diff --git a/README.md b/README.md index c0528c2..6315863 100644 --- a/README.md +++ b/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 - 占位 - - - + + + + + + + + + {{ affixed ? '🍎' : '🍏' }} + 吸顶【插槽版】 + + + + + + + + {{ isAffixed120 ? '🌝' : '🌚' }} + 距离顶部120px时固定【回调版】 + + + + + {{ index === 49 ? '到底了' : `占位符${index + 1}` }} + + + + + + + + - ``` diff --git a/example/src/views/ExampleAffix.vue b/example/src/views/ExampleAffix.vue index 31f496b..a6ca484 100644 --- a/example/src/views/ExampleAffix.vue +++ b/example/src/views/ExampleAffix.vue @@ -11,26 +11,31 @@ v-if="index === 2" > - - 吸顶 - + + + {{ affixed ? '🍎' : '🍏' }} + 吸顶【插槽版】 + + - 距离顶部120px时固定 + {{ isAffixed120 ? '🌝' : '🌚' }} + 距离顶部120px时固定【回调版】 - {{ index === 99 ? '到底了' : `占位符${index + 1}` }} + {{ index === 49 ? '到底了' : `占位符${index + 1}` }} @@ -40,7 +45,17 @@ diff --git a/package.json b/package.json index e6879d3..d3ac07b 100644 --- a/package.json +++ b/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 ", diff --git a/src/components/ScrollAffix/index.vue b/src/components/ScrollAffix/index.vue index cec9ec4..a9d1a75 100644 --- a/src/components/ScrollAffix/index.vue +++ b/src/components/ScrollAffix/index.vue @@ -9,7 +9,11 @@ :style="affixStyle" class="scroll-affix-container" > - + @@ -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) } } } diff --git a/src/main.js b/src/main.js index 89d3730..24f8387 100644 --- a/src/main.js +++ b/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 }