vue-affix-box

一个Vue插件，能将页面元素钉在可视范围。

Demo

Demo

快速使用

安装

$ npm i vue-affix-box -S

or

$ yarn add vue-affix-box

引入

全局引入:

import Vue from 'vue'
import VueAffixBox from 'vue-affix-box'

Vue.component('vue-affix-box', VueAffixBox)

局部引入:

import VueAffixBox from 'vue-affix-box'

export default {
  components: {
    VueAffixBox
  },
  ...
}

使用

<vue-affix-box :offset-top="100">
  <div>固定顶部</div>
</vue-affix-box>

<vue-affix-box :offset-bottom="100">
  <div>固定底部</div>
</vue-affix-box>

API

vue-affix-box组件与ant-design的affix组件的API保持一致，并在此基础上进行了扩展。

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | — | 0 | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | — | — | | target | 设置 Affix 需要监听其滚动事件的元素 | string/object | — | window | | reference | 设置 Affix 相对固定的元素 | string/object | — | — | | zIndex | z-index 堆叠顺序 | number | — | 10 | | throttleLimit | 滚动事件的节流时间 | number | — | 50 | | disabled | 是否禁用 | boolean | — | false |

Methods

| 方法名 | 说明 | 参数 | |---------- |-------- |---------- | | updatePosition | 更新 Affix 位置 | — |

Events

| 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | change | 固定状态改变时触发的事件 | 当前固定状态 |