vue-svg-sketch
A Vue.js component Demo
Installation
Install through npm:
npm install vue-svg-sketch
Available props:
disabled
- state disabled (Boolean)width
- svg width (Number)height
- svg height (Number)size
- size brash (Number)[default: 3]color
- color brash [default: 'red']
Usage
<template><div id="app"><svg-sketch ref="sketch":disabled="disabled":width="800":height="600":size="size":color="color"></svg-sketch></div></template><script>import svgSketch from 'vue-svg-sketch'export default {name: 'app',components: {svgSketch},data () {return {disabled: false,size: 3,color: '#000',json: ''}},methods: {revert () {this.$refs.sketch.revert()},clean () {this.$refs.sketch.clean()},getJSON () {console.log(this.$refs.sketch.getJSON())alert('See console')}}}</script>
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.