Improve vue-waves

Teddy-Zhu · Oct 19, 2016 · 8da7839 · 8da7839
1 parent 7da4a97
commit 8da7839
Show file tree

Hide file tree

Showing 11 changed files with 511 additions and 218 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,10 @@
+{
+    "undef": true,
+    "unused": true,
+    "esversion": 6,
+    "asi": true,
+    "browser": true,
+    "node": true,
+    "devel": true,
+    "predef": ["Vue", "VueWaves"]
+}
diff --git a/README.md b/README.md
@@ -1,27 +1,51 @@
 # vue-waves
 
-> it&#x27;s a vuejs version of waves Based on https://github.com/fians/Waves
+A Vue.js version of waves based on https://github.com/fians/Waves.
 
 ## How to Use
 
-``` bash
-# install dependencies
+### SetUp
+
+```bash
 npm install vue-waves
 ```
+
 then in the js file
-``` javascript
+
+```javascript
 var Vue = require('vue')
-var vueWaves = require('vue-waves');
+var VueWaves = require('vue-waves');
 
-Vue.use(vueWaves);
+Vue.use(VueWaves);
 ```
 
-then in vue file
+### Config
+
+```javascript
+Vue.use(VueWaves, {
+  name: 'waves'   // Vue指令名称
+  duration: 500,  // 涟漪效果持续时间
+  delay: 200      // 延时显示涟漪效果
+})
+```
 
-``` html
-<teamplate>
-   <div v-waves>
-</teamlate>
+### Usage
+
+```html
+<button v-waves.button>Vue-Waves</button>
+```
+
+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
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>vue-waves</title>
+    <script src="http://cdn.bootcss.com/vue/2.0.3/vue.js" charset="utf-8"></script>
+    <script src="../dist/vue-waves.js" charset="utf-8"></script>
+</head>
+
+<body>
+    <div id="app">
+        <h1 class="message" v-waves.block>
+            {{ message }}
+        </h1>
+        <section>
+            <a v-for="color in colors" :style="{background:color}" v-waves.button>Vue Waves</a>
+        </section>
+        <section>
+            <button type="button" v-for="color in colors" :style="{background:color}" v-waves.button.float>Vue Waves</button>
+        </section>
+        <section>
+            <input type="button" v-for="color in colors" :style="{background:color}" v-waves.button.light value="Vue Waves">
+        </section>
+        <section>
+            <i v-for="color in colors" :style="{background:color}" v-waves.circle>V</i>
+        </section>
+        <section>
+            <i v-for="color in colors" :style="{background:color}" v-waves.circle.float>V</i>
+        </section>
+        <section>
+            <img v-waves.block src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
+        </section>
+    </div>
+    <style media="screen">
+        #app {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .message {
+            padding: 16px;
+        }
+
+        section {
+            margin-top: 16px;
+        }
+
+        a,
+        button,
+        input,
+        i {
+            margin-left: 8px;
+            margin-right: 8px;
+            color: #fff!important;
+        }
+    </style>
+    <script type="text/javascript">
+        Vue.use(VueWaves)
+        new Vue({
+            el: '#app',
+            data: {
+                message: 'Hello Vue Waves!',
+                colors: [
+                    'rgb(3, 169, 244)',
+                    'rgb(76, 175, 80)',
+                    'rgb(255, 235, 59)',
+                    'rgb(255, 152, 0)',
+                    'rgb(255, 87, 34)',
+                    'rgb(233, 30, 99)',
+                ]
+            }
+        })
+    </script>
+</body>
+
+</html>
diff --git a/dist/vue-waves.js b/dist/vue-waves.js
diff --git a/index.js b/index.js
@@ -0,0 +1,20 @@
+import './waves.css'
+import Waves from './waves.js'
+
+module.exports = {
+    install(Vue, options = { name: 'waves' }) {
+        Vue.directive(options.name, {
+            inserted(el, binding) {
+                let classes = ['button', 'circle', 'block', 'float', 'light', 'classic']
+                    .filter(cls => binding.modifiers[cls])
+                    .map(cls => `waves-${cls}`)
+                Waves.attach(el, classes)
+            }
+        })
+        Vue.mixin({
+            created: function() {
+                Waves.init(options);
+            }
+        })
+    }
+}
diff --git a/package.json b/package.json
@@ -1,29 +1,30 @@
 {
-  "name": "vue-waves",
-  "homepage": "http://www.eicoding.com",
-  "version": "0.0.5",
-  "description": "it&#x27;s a vuejs version of waves",
-  "author": "teddyzhu",
-  "scripts": {
-
-  },
-  "dependencies": {
-    "vue": "^1.0.21",
-    "css-loader": "^0.23.1",
-    "cssnext-loader": "^1.0.1"
-  },
-  "readme":"README.md",
-  "main": "waves.js",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Teddy-Zhu/vue-waves.git"
-  },
-  "license": "MIT",
-  "devDependencies": {
-  },
-  "files": [
-    "Readme.md",
-    "waves.js",
-    "waves.css"
-  ]
+    "name": "vue-waves",
+    "homepage": "https://github.com/Teddy-Zhu/vue-waves",
+    "version": "0.1.0",
+    "description": "A Vue.js version of waves",
+    "author": "teddyzhu",
+    "scripts": {
+        "build": "webpack -p"
+    },
+    "dependencies": {},
+    "readme": "README.md",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:Teddy-Zhu/vue-waves.git"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "babel-core": "^6.17.0",
+        "babel-loader": "^6.2.5",
+        "babel-preset-es2015": "^6.16.0",
+        "css-loader": "^0.25.0",
+        "style-loader": "^0.13.1",
+        "vue": "^2.0.3",
+        "webpack": "^1.13.2"
+    },
+    "files": [
+        "dist"
+    ]
 }