https://github.com/Teddy-Zhu/vue-waves

it's a vuejs version of waves
https://github.com/Teddy-Zhu/vue-waves

Last synced: about 2 months ago
JSON representation

it's a vuejs version of waves

• Host: GitHub
• URL: https://github.com/Teddy-Zhu/vue-waves
• Owner: Teddy-Zhu
• License: mit
• Created: 2016-04-13T04:52:25.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-02T08:21:20.000Z (over 6 years ago)
• Last Synced: 2024-07-19T06:05:30.787Z (2 months ago)
• Language: JavaScript
• Homepage: http://fian.my.id/Waves/
• Size: 67.4 KB
• Stars: 46
• Watchers: 3
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-waves ★3 - Zhu (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-vue - vue-waves - Zhu/vue-waves?style=social) - waves的VueJS版本 (UI组件)
• awesome-github-vue - vue-waves - waves的VueJS版本 (UI组件)
• awesome-github-vue - vue-waves - waves的VueJS版本 (UI组件)
• awesome - vue-waves - waves的VueJS版本 (UI组件)

README

        
# vue-waves

A Vue.js version of waves based on https://github.com/fians/Waves.

## How to Use

### SetUp

```bash

npm i -S vue-waves

```

then in the js file

```javascript

import Vue from 'vue';

import VueWaves from 'vue-waves';

Vue.use(VueWaves);

```

### Config

```javascript

Vue.use(VueWaves, {

  name: 'waves'   // Vue指令名称

  duration: 500,  // 涟漪效果持续时间

  delay: 200      // 延时显示涟漪效果

})

```

### Usage

```html

Vue-Waves



```

Vue directive:

```

v-waves.button  按钮

v-waves.circle  圆形

v-waves.block   块

v-waves.float   阴影效果

v-waves.light   亮色涟漪

v-waves.classic ??

```

Demo:

    git clone https://github.com/Teddy-Zhu/vue-waves.git

    open vue-waves/demo/index.html

# Contributes

```

$ npm i

$ npm run build

```