vue-sticky

工作在 Vue2 的 sticky 功能。

目前的局限：

• 在一个容器内，只能正确处理一个 v-sticky 的元素
• 仅支持贴在顶部

使用

sticky 提供了指令和组件两种使用方式:

• v-sticky 使用指令 import {sticky} from '@wangankeji/vue-sticky' 注意这里是小写

• <sticky> 使用组件 import {Sticky} from '@wangankeji/vue-sticky' 注意这里是大写

• Sticky 大写表示引入组件 (推荐用法)

• sticky 小写表示引入指令

通常情况下，不建议直接使用指令。

属性

const props = {
  zIndex: {
    type: Number,
    default: 1
  },
  delay: {
    type: Number,
    default: 100
  },
  offsetTop: {
    type: Number,
    default: 0
  },
  offsetLeft: {
    type: Number,
    default: 0
  },
  offsetWidth: {
    type: Number,
    default: 0
  },
  // 是否应用了 css animation
  animation: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
}

事件

指令的事件 change 会在使用此指令的组件上触发，如：

<template>
  <div>
    <div v-sticky>
      ...
    </div>
    <div>
      ...
    </div>
  </div>
</template>

<script>
import {sticky} from '@wangankeji/vue-sticky'

export default {
  name: 'ComponentA',
  directives: {sticky},
  mounted() {
    this.$on('change', ({attached, element}) => {})
  }
}
</script>

而组件的事件在 sticky 组件上触发。

<template>
  <sticky @change="onStickyChange">
    <template v-slot:sticky="{attached}">
      ...
    </template>
    <template v-slot:default="{attached}">
      ...
    </template>
  </sticky>
</template>

<script>
import {Sticky} from '@wangankeji/vue-sticky' 

export default { 
  components: { Sticky }
}
</script>

此事件有一个参数，其结构如下:

e = {
  attached: true, // 状态，值为 true/false
  element: '<HTMLElement>' // 当前的元素 
}