0.0.1 • Published 6 years ago
vue-auto-float-directvie v0.0.1
vue-auto-float-directive
description
auto float the components when scroll over it, just like the good detail page tab of https://www.jd.com, it has these features:
当页面滚动过该组件时自动悬浮起来,类似京东商品详情页里的tab, 它有如下特征:
auto put a place holder after the origin element's to avoid the layout disorder
自动放置占位元素,避免页面布局错乱或抖动
support width self-adaption component when resize the window
支持宽度自适应的组件,例如窗口大小调整的时候
support ssr
install
npm install vue-auto-float-directive
example
import Vue from 'vue'
import AutoFloat from 'vue-auto-float-directive'
Vue.use(AutoFloat)
<div v-auto-float>
</div>
notices
- only support pc browsers 只支持pc版本
- it will overridethe style.cssText when the component float, so use className to set css, not style 当组件悬浮时会覆盖cssText,所以使用class去设置样式,而不要用style
plans
- support mobile browsers
- not override the style.cssText
- use the vm.$nextTick to make sure the element has binded
0.0.1
6 years ago