1.0.1 • Published 3 years ago

vue-affix-box v1.0.1

Weekly downloads
3
License
ISC
Repository
-
Last release
3 years ago

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距离窗口顶部达到指定偏移量后触发number0
offsetBottom距离窗口底部达到指定偏移量后触发number
target设置 Affix 需要监听其滚动事件的元素string/objectwindow
reference设置 Affix 相对固定的元素string/object
zIndexz-index 堆叠顺序number10
throttleLimit滚动事件的节流时间number50
disabled是否禁用booleanfalse

Methods

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

Events

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