Vue的强大粘性指令

Vue的强大粘性指令
插件名称 vue-sticky-directive
发布时间 2020年6月14日
插件作者 mehwww

vue-sticky-directive是强大的vue指令,使元素具有粘性。

安装和下载:

# NPM
$ npm install vue-sticky-directive --save

用法

使用v-sticky指令启用元素位置粘贴,并使用sticky-*属性定义其选项。粘贴元素将找到其最接近的具有sticky-container属性的元素,或者如果作为相对元素失败则将找到其父节点。

<div sticky-container>
  <div v-sticky sticky-offset="offset" sticky-side="top">
    ...
  </div>
</div>

选项

  • sticky-offset -设置粘性偏移量,它支持vm变量名称或js表达式,例如 {top: 10, bottom: 20}
    • top(数字) -设置顶断点(默认:0
    • bottom(数字) -设置断点底部(默认0
  • sticky-side(字符串) -决定哪一方应该是粘,可以设置topbottom或者both(默认值:top
  • sticky-z-index (数字) -将元素的z-index设置为stick
  • on-stick (功能) -黏着并释放时回调,接收到1个带有对象的参数来指示状态,例如:
//元素粘贴在顶部
{ 
  bottom:false ,
  top:true ,
  sticked:true 
}

评估为false set on的表达式v-sticky可用于有条件地禁用粘性。

<div sticky-container>
  <div v-sticky="shouldStick">
    ...
  </div>
</div>
export defaults {
  data () {
    shouldStick: false
  }
}