# vue-auto-float-directive

> auto float the component when scroll the page like the product detail page in jd.com

Latest version **0.0.9** (published 2017-11-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-auto-float-directive
pnpm add vue-auto-float-directive
yarn add vue-auto-float-directive
bun add vue-auto-float-directive
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2017-11-28 |
| First published | 2017-11-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | jacky-fe |
| Maintainers | jacky-fe |
| Keywords | vue, auto, float, directive |

## Links

- npm: https://www.npmjs.com/package/vue-auto-float-directive
- Repository: https://github.com/jacky-fe/vue-auto-float-directive
- Homepage: https://github.com/jacky-fe/vue-auto-float-directive#readme
- Issues: https://github.com/jacky-fe/vue-auto-float-directive/issues
- npm.io page: https://npm.io/package/vue-auto-float-directive

## Recent versions

- 0.0.9 (latest) — 2017-11-28
- 0.0.8 — 2017-11-28
- 0.0.7 — 2017-11-28
- 0.0.6 — 2017-11-27
- 0.0.5 — 2017-11-27
- 0.0.4 — 2017-11-27
- 0.0.3 — 2017-11-24
- 0.0.2 — 2017-11-23
- 0.0.1 — 2017-11-23

## README

# 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, 它有如下特征：

1. auto put a place holder after the origin element's to avoid the layout disorder

    自动放置占位元素，避免页面布局错乱或抖动

2. support width self-adaption component when resize the window 

    支持宽度自适应的组件，例如窗口大小调整的时候

3. support ssr

## change logs
0.0.7 append the origin dom element to body when float it, compute the offset with 'margin-left' and 'margin-top'

## install
npm install vue-auto-float-directive

## example
``` js
import Vue  from 'vue'
import  AutoFloat  from 'vue-auto-float-directive'
Vue.use(AutoFloat)
```
``` html
<div v-auto-float>
</div>
```
``` js
  methods: {
    noticeHeightChanged () {
      // when emit this event, the directive will recompute the height of origin component
      this.$emit('v-auto-float-height-change')
    }
  }
```
## notices
1. only support pc browsers

    只支持pc版本
2. it will overridethe style.cssText when the component float(before 0.0.5), so use className to set css, not style

    当组件悬浮时会覆盖cssText，所以使用class去设置样式，而不要用style

## plans
1. support mobile browsers
2. not override the style.cssText (completed @0.0.5)
3. use the vm.$nextTick to make sure the element has binded
4. support auto adjust size by emit event (completed @0.0.5)

---
_Source: https://npm.io/package/vue-auto-float-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._