0.如何安装

npm install vv-sticky

1.使用场景

移动端需要滚动吸顶的业务场景

2.为啥要整理一个插件

如果你能只用 CSS 那显然是相当好的，但是兼容性是相当可悲的， 所以搭配JS做了一个能力检查，一个插件能解决了，一了百了

2.引入方法

import VVSticky from 'vv-sticky'
Vue.use(VVSticky)

3.使用模式

1.插件模式

// main.js

import VVSticky from 'vv-sticky'
Vue.directive('sticky', stickyD)

// app.vue
<template>
  <section v-sticky="stickyConfig">{{msg}}</section>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return {
      stickyConfig: {
        zIndex: 10,
        stickyTop: 0
      },
      msg: 'Welcome'
    }
  }
}
</script>

2.指令模式

// app.vue
<template>
  <section v-sticky="stickyConfig">{{msg}}</section>
</template>
<script>
import VVSticky from 'vv-sticky'
export default {
  name: 'demo',
  directives: {
    'sticky': VVSticky
  },
  data () {
    return {
      stickyConfig: {
        zIndex: 10,
        stickyTop: 0
      },
      msg: 'Welcome'
    }
  }
}
</script>

License

MIT

Copyright (c) 2018-present, Yejunnan (Liu) You