# vue-wobblewindow

> jquery-wobblewindow的移植包

Latest version **1.0.2** (published 2020-01-08) · 0 weekly downloads

## Install

```sh
npm install vue-wobblewindow
pnpm add vue-wobblewindow
yarn add vue-wobblewindow
bun add vue-wobblewindow
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-01-08 |
| First published | 2020-01-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yangchan |
| Keywords | wobblewindow, vue-wobblewindow |

## Links

- npm: https://www.npmjs.com/package/vue-wobblewindow
- npm.io page: https://npm.io/package/vue-wobblewindow

## Recent versions

- 1.0.2 (latest) — 2020-01-08
- 1.0.1 — 2020-01-08

## README

## 前言

此包是基于jquery-wobblewindow移植过来的，在写项目中，要求了这样的一个特效，但是没找到vue版本的代码，于是就自己对照jquery-wobblewindow的源码稍微做了改造，大佬勿喷

## 使用

### 第一步：安装vue-wobblewindow
``` bash

$ npm install vue-wobblewindow --save

```

### 第二步：创建DOM 并设定ref属性

具体示例如下，配置、CSS等参考jquery-wobblewindow的配置即可。搬运工不在此过多BB

``` bash
<template>
  <div>
    <div class="myCase" ref="caseBox"></div>
  </div>
</template>

<script>
  import { wobbleWindow } from 'vue-wobblewindow'
  export default {
    data() {
      return {
        caseBox: null,
        settings: {
          bodyColor: '#fff',
          wobbleFactor: 0.99,
          wobbleSpeed: 0.05
        }
      }
    },
    mounted(){
      this.caseBox = this.$refs.caseBox
      wobbleWindow(this.caseBox, this.settings)
    }
  }

</script>


```

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