1.0.1 • Published 6 years ago
vv-sticky v1.0.1
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
Copyright (c) 2018-present, Yejunnan (Liu) You