complete

junlv · Oct 25, 2017 · d5b36b3 · d5b36b3
1 parent 015635b
commit d5b36b3
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,62 @@
 # vue-signature
 
-> A Vue.js project
+> A electronic signature component by Vue.js
+## API
+#### Props
+| name          |     type      |           default         |       description      |
+|:-------------:|:-------------:|:-------------------------:|   :-----------------:  |
+| sigOption     | `Obeject`     | {penColor:"rgb(0, 0, 0)"} |     penColor           |
 
-## Build Setup
+#### Methods
+| name              |  params       | description  |
+| :-------------:   |:-------------:|:-------------:|
+| save              | (),("image/jpeg"),("image/svg+xml") | save image as PNG/JPEG/SVG |
+| clear     |  | clear canvas |
 
-``` bash
-# install dependencies
-npm install
 
-# serve with hot reload at localhost:8080
-npm run dev
+## Usage
 
-# build for production with minification
-npm run build
+``` npm install vue-signature ```
+
+main.js
+
+```
+import vueSignature from "vue-signature"
+Vue.use(vueSignature)
+```
+A.vue
+
+```
+<template>
+    <vueSignature ref="signature" :sigOption="option"></vueSignature> 
+</template>
+
+<script>
+    export default {
+        name: "app",
+        data() {
+            return {
+                option:{
+                    penColor:"rgb(0, 0, 0)"
+                }
+            };
+        },
+        methods:{
+            save(){
+                var _this = this;
+                var png = _this.$refs.signature.save()
+                var jpeg = _this.$refs.signature.save('image/jpeg')
+                var svg = _this.$refs.signature.save('image/svg+xml');
+                console.log(png);
+                console.log(jpeg)
+                console.log(svg)
+            },
+            clear(){
+                var _this = this;
+                _this.$refs.signature.clear();
+            }
+        }
+    };
+</script>
 ```
 
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/src/App.vue b/src/App.vue
@@ -1,60 +1,47 @@
 <template>
-  <div id="app">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
-    <vueSignature></vueSignature> 
-  </div>
+	<div id="app">
+		<vueSignature ref="signature" :sigOption="option"></vueSignature> 
+		<button @click="save">保存</button>
+		<button @click="clear">清除</button>
+	</div>
 </template>
 
 <script>
 export default {
-  name: 'app',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
+	name: "app",
+	data() {
+		return {
+			option:{
+				penColor:"rgb(0, 0, 0)"
+			}
+		};
+	},
+	methods:{
+		save(){
+			var _this = this;
+			var png = _this.$refs.signature.save()
+			var jpeg = _this.$refs.signature.save('image/jpeg')
+			var svg = _this.$refs.signature.save('image/svg+xml');
+			console.log(png);
+			console.log(jpeg)
+			console.log(svg)
+		},
+		clear(){
+			var _this = this;
+			_this.$refs.signature.clear();
+		}
+	}
+};
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
+	font-family: "Avenir", Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+	margin-top: 60px;
 }
 
-a {
-  color: #42b983;
-}
 </style>
diff --git a/src/lib/vue-signature.vue b/src/lib/vue-signature.vue
@@ -1,38 +1,77 @@
 <template>
-	<canvas id="canvas" class="canvas"></canvas>
+	<div>
+		<canvas id="canvas" class="canvas"></canvas>
+	</div>
+
 </template>
 
 <script>
 	import SignaturePad from 'signature_pad'
 	export default {
 		name:"vueSignature",
+		props:{
+			sigOption: {
+				type:Object,
+				default:{
+					penColor : 'rgb(0, 0, 0)',
+				}
+			}
+		},
 		data(){
 			return {
 				sig:()=>{}
 			}
 		},
-		mounted(){
-			var v = this;
-			var canvas = document.getElementById("canvas");
-			v.sig = new SignaturePad(canvas, {
-				backgroundColor: 'rgba(255, 255, 255, 0)',
-				penColor: 'rgb(0, 0, 0)'
-			});
-			function resizeCanvas() {
-				// canvas.width = canvas.offsetWidth ;
-				// canvas.height = canvas.offsetHeight ;
-				canvas.width  = window.innerWidth;
-  				canvas.height = window.innerHeight;
+		methods:{
+			draw(){
+				var _this = this;
+				var canvas = document.getElementById("canvas");
+				_this.sig = new SignaturePad(canvas,_this.sigOption);
+				function isPC() {
+					var userAgentInfo = navigator.userAgent;
+					var Agents = ["Android", "iPhone",
+								"SymbianOS", "Windows Phone",
+								"iPad", "iPod"];
+					var flag = true;
+					for (var v = 0; v < Agents.length; v++) {
+						if (userAgentInfo.indexOf(Agents[v]) > 0) {
+							flag = false;
+							break;
+						}
+					}
+					return flag;
+				}
+				function resizeCanvas() {
+					if(isPC){
+						canvas.width  = window.innerWidth;
+						canvas.height = window.innerHeight;
+					}else{
+						canvas.width = canvas.offsetWidth;
+						canvas.height = canvas.offsetHeight;
+					}
+				}
+				window.addEventListener("resize", resizeCanvas);
+				resizeCanvas();
+			},
+			clear(){
+				var _this = this;
+				_this.sig.clear();
+			},
+			save(format){
+				var _this = this;
+				return format ? _this.sig.toDataURL(format) :  _this.sig.toDataURL()
+				// signaturePad.toDataURL(); // save image as PNG
+				// signaturePad.toDataURL("image/jpeg"); // save image as JPEG
+				// signaturePad.toDataURL("image/svg+xml"); // save image as SVG
 			}
-			window.addEventListener("resize", resizeCanvas);
-			resizeCanvas();
+		},
+		mounted(){
+			var _this = this;
+			_this.draw()
 		}
 	}
 </script>
 
 <style>
-	#canvas{
-		width:100%;
-		height:100%;
-	}
+
 </style>