update format

Author: purestart

package.json

@@ -24,6 +24,7 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
+    "lint:fix": "npm run lint -- --fix",
     "build": "node build/build.js"
   },
   "dependencies": {

src/App.vue

@@ -9,7 +9,7 @@ export default {
   name: 'app',
   data () {
     return {};
-  },
+  }
 };
 </script>
 

src/components/fabric/fabric.vue

@@ -4,17 +4,17 @@
   </div>
 </template>
 
-<script type='text/ecmascript-6'>
+<script type="text/ecmascript-6">
 import Utils from '../../utils';
 const dotCircleImg = require('../../assets/dot-circle.png');
 const rotateMdrImg = require('../../assets/rotate-mdr.png');
 export default {
   name: 'VueFabric',
   props: {
     id: {
-        type: String,
-        required: false,
-        default: 'fabricCanvas',
+      type: String,
+      required: false,
+      default: 'fabricCanvas'
     },
     width: {
       type: Number,
@@ -225,7 +225,7 @@ export default {
       return path;
     },
     freeDrawConfig (options) {
-      options = Object.assign({color:'#b2b2b2',drawWidth:2},options);
+      options = Object.assign({color: '#b2b2b2', drawWidth: 2}, options);
 
       this.canvas.isDrawingMode = options.isDrawingMode;
       this.canvas.freeDrawingBrush.color = options.color; // 设置自由绘颜色
@@ -571,15 +571,15 @@ export default {
     // 设置mirror
     toggleMirror (options) {
       options = options || {};
-      options = Object.assign({ flip : 'X' },options);
+      options = Object.assign({ flip: 'X' }, options);
       let img = this.canvas.getActiveObject();
       // if (img && img.type == 'image') {
-        if (options.flip === 'X') {
-          img.toggle('flipX');
-        } else {
-          img.toggle('flipY');
-        }
-        this.renderAll();
+      if (options.flip === 'X') {
+        img.toggle('flipX');
+      } else {
+        img.toggle('flipY');
+      }
+      this.renderAll();
       // }
     },
     // 设置层级
@@ -637,5 +637,4 @@ export default {
 };
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss" scoped></style>

src/components/fabric/index.js

@@ -1,8 +1,9 @@
-import FabricComponent from './fabric.vue'
+import FabricComponent from './fabric.vue';
 
-　　const Fabric={
-　　　　install:function(Vue){ //核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件
-　　　　Vue.component(FabricComponent.name,FabricComponent);
-　　}
+const Fabric = {
+  install: function (Vue) {
+    // 核心部分，在我们使用Vue.use()时，自动调用的是install，而install导出的必须是的组件
+    Vue.component(FabricComponent.name, FabricComponent);
+  }
 };
-export default Fabric;
+export default Fabric;

src/examples/image-list.vue

@@ -9,47 +9,47 @@
 
 <script type='text/ecmascript-6'>
   export default {
-    props:{
-        handleAdd:Function,
+    props: {
+      handleAdd: Function
     },
     data () {
       return {
-          list:[
-              {
-                  id:1,
-                  url:"/static/images/sticker1.png"
-              },
-              {
-                  id:2,
-                  url:"/static/images/sticker2.png"
-              },
-              {
-                  id:3,
-                  url:"/static/images/sticker3.png"
-              },
-              {
-                  id:4,
-                  url:"/static/images/sticker4.png"
-              },
-              {
-                  id:5,
-                  url:"/static/images/sticker5.png"
-              },{
-                  id:6,
-                  url:"/static/images/sticker1.png"
-              },
-          ],
-      }
+        list: [
+          {
+            id: 1,
+            url: '/static/images/sticker1.png'
+          },
+          {
+            id: 2,
+            url: '/static/images/sticker2.png'
+          },
+          {
+            id: 3,
+            url: '/static/images/sticker3.png'
+          },
+          {
+            id: 4,
+            url: '/static/images/sticker4.png'
+          },
+          {
+            id: 5,
+            url: '/static/images/sticker5.png'
+          }, {
+            id: 6,
+            url: '/static/images/sticker1.png'
+          }
+        ]
+      };
     },
     created () {
     },
     mounted () {
 
     },
-    methods:{
+    methods: {
 
     }
-  }
+  };
 </script>
 
 <style lang='scss' scoped>
@@ -65,8 +65,6 @@
 
         display: flex;
         -webkit-overflow-scrolling: touch;
-        
-
         flex-wrap:nowrap;
         border-top: 1px solid #e4e4e4;
 

src/examples/index-pc.vue

@@ -83,8 +83,8 @@ export default {
     this.$refs.canvas.drawByPath([[50, 50], [120, 120], [80, 160]], {});
   },
   methods: {
-    toggleMirror() {
-      this.$refs.canvas.toggleMirror({flip:"Y"});
+    toggleMirror () {
+      this.$refs.canvas.toggleMirror({flip: 'Y'});
     },
     discardActive () {
       this.$refs.canvas.discardActive();

src/examples/index.vue

@@ -8,45 +8,45 @@
 </template>
 
 <script>
-import toolbar from "./toolbar";
-import ImageList from "./image-list";
+import toolbar from './toolbar';
+import ImageList from './image-list';
 
 export default {
   name: 'el-index',
-  components:{
+  components: {
     toolbar,
     ImageList
   },
-  data(){
-    return{
-          imgUrl:"http://data618.oss-cn-qingdao.aliyuncs.com/ys/3524/img/b.jpg",
-          width:300,
-          height:500
-    }
+  data () {
+    return {
+      imgUrl: 'http://data618.oss-cn-qingdao.aliyuncs.com/ys/3524/img/b.jpg',
+      width: 300,
+      height: 500
+    };
   },
-  created(){
-    this.width=document.body.offsetWidth;
-    this.height=document.body.offsetHeight;
+  created () {
+    this.width = document.body.offsetWidth;
+    this.height = document.body.offsetHeight;
   },
-  mounted(){
-    this.$refs.canvas.createTriangle(40,40,'yellow');
+  mounted () {
+    this.$refs.canvas.createTriangle(40, 40, 'yellow');
     this.$refs.canvas.createImage('/static/images/sticker1.png');
     this.$refs.canvas.createImage('/static/images/sticker2.png');
     this.$refs.canvas.createImage('/static/images/sticker3.png');
   },
-  methods:{
-    handleDelete(){
-      console.log("handleDelete");
-      
+  methods: {
+    handleDelete () {
+      console.log('handleDelete');
+
       this.$refs.canvas.removeCurrentObj();
     },
-    handleRotate(){
-      this.$refs.canvas.setRotate(); 
+    handleRotate () {
+      this.$refs.canvas.setRotate();
      // this.$refs.canvas.moveTo();
     },
-    handleAdd(url){
+    handleAdd (url) {
       this.$refs.canvas.createImage(url);
-    },
+    }
   }
 };
 </script>

src/examples/toolbar.vue

@@ -7,23 +7,23 @@
 
 <script type='text/ecmascript-6'>
   export default {
-      props:{
-        handleDelete:Function,
-        rotate:Function,
-      },
+    props: {
+      handleDelete: Function,
+      rotate: Function
+    },
     data () {
       return {
-      }
+      };
     },
     created () {
     },
     mounted () {
 
     },
-    methods:{
+    methods: {
 
     }
-  }
+  };
 </script>
 
 <style lang='scss' scoped>

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import App from './App';
 import router from './router';
 
-import {Fabric } from '@/components';
+import { Fabric } from '@/components';
 // import '../dist/hg-vcomponents.min.css';
 
 Vue.use(Fabric);
@@ -15,4 +15,4 @@ new Vue({
   router,
   template: '<App/>',
   components: { App }
-});
+});

src/router/index.js

@@ -1,29 +1,27 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 const Index = () => import('@/examples/index.vue');
-const PCIndex=()=> import('@/examples/index-pc.vue');
+const PCIndex = () => import('@/examples/index-pc.vue');
 
-function isMobile() {
-  if( navigator.userAgent.match(/Android/i)
-  || navigator.userAgent.match(/webOS/i)
-  || navigator.userAgent.match(/iPhone/i)
-  || navigator.userAgent.match(/iPad/i)
-  || navigator.userAgent.match(/iPod/i)
-  || navigator.userAgent.match(/BlackBerry/i)
-  || navigator.userAgent.match(/Windows Phone/i)
-  ){
-      return true;
-  }
-  else {
-      return false;
+function isMobile () {
+  if (navigator.userAgent.match(/Android/i) ||
+  navigator.userAgent.match(/webOS/i) ||
+  navigator.userAgent.match(/iPhone/i) ||
+  navigator.userAgent.match(/iPad/i) ||
+  navigator.userAgent.match(/iPod/i) ||
+  navigator.userAgent.match(/BlackBerry/i) ||
+  navigator.userAgent.match(/Windows Phone/i)
+  ) {
+    return true;
+  } else {
+    return false;
   }
 }
 
-
 Vue.use(Router);
 
-const router= new Router({
-  mode:'history',
+const router = new Router({
+  mode: 'history',
   routes: [
     {
       path: '/home',