格式化代码

src/views/poster/PosterList.vue

@@ -6,36 +6,35 @@
       <a-form layout="inline">
         <a-row :gutter="24">
           <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
-                        <a-col :md="6" :sm="24">
-                            <a-button @click="add()" type="primary">新建海报</a-button>
-                        </a-col>
-                    </span>
+            <a-col :md="6" :sm="24">
+              <a-button @click="add()" type="primary">新建海报</a-button>
+            </a-col>
+          </span>
         </a-row>
       </a-form>
-    </div>
+    </div>ß
     <new-poster ref="model1"></new-poster>
   </div>
 </template>
 
 <script>
-import newPoster from './newPoster'
+import newPoster from "./newPoster";
 export default {
   name: "PosterList",
-  components: {newPoster},
-  compontents:{
+  components: { newPoster },
+  compontents: {
     newPoster
   },
-  data(){
-    return {}
+  data() {
+    return {};
   },
-  methods:{
-    add(){
+  methods: {
+    add() {
       this.$refs.model1.showModal();
     }
   }
-}
+};
 </script>
 
 <style scoped>
-
 </style>

src/views/poster/newPoster.vue

 <template>
   <a-drawer
-          title="海报创建"
-          placement="right"
-          :closable="true"
-          :visible="visible"
-          @close="onClose"
-          width="100%"
-          :bodyStyle="{'padding':0}"
-          destroyOnClose
+    title="海报创建"
+    placement="right"
+    :closable="true"
+    :visible="visible"
+    @close="onClose"
+    width="100%"
+    :bodyStyle="{'padding':0}"
+    destroyOnClose
   >
     <div class="meun-box">
       <a-row>
         <a-col :span="6">
           <div class="select-btn">
             <span>选择图片</span>
-            <input ref="selectImgae" class="seletImg" type="file" @change="selectImage"/>
+            <input ref="selectImgae" class="seletImg" type="file" @change="selectImage" />
           </div>
-          <a-button @click="toImage" v-if="images!=''">生成图片</a-button>
+          <a-button @click="toImage" v-if="images != ''">生成图片</a-button>
         </a-col>
         <a-col :span="6" v-if="images!=''">
           <a-form-item label="二维码大小：" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
-            <a-slider id="code" v-model="codeWidth" :max="300"/>
+            <a-slider id="code" v-model="codeWidth" :max="300" />
           </a-form-item>
         </a-col>
       </a-row>
@@ -28,7 +28,7 @@
     <div class="center-box">
       <div class="image-box" ref="imageWrapper" v-if="images!=''">
         <code-move :width="codeWidth"></code-move>
-        <img class="bg-img" :src="images">
+        <img class="bg-img" :src="images" />
       </div>
     </div>
   </a-drawer>
@@ -36,18 +36,18 @@
 
 <script>
 import CodeMove from "../../components/sysmanage/codeMove";
-import html2canvas from 'html2canvas'
+import html2canvas from "html2canvas";
 import ACol from "ant-design-vue/es/grid/Col";
 
 export default {
   name: "newPoster",
-  components: {ACol, CodeMove},
+  components: { ACol, CodeMove },
   data() {
     return {
       visible: false,
-      images: '',
-      codeWidth: 150//二维码大小
-    }
+      images: "",
+      codeWidth: 150 //二维码大小
+    };
   },
   methods: {
     showModal() {
@@ -62,18 +62,18 @@ export default {
         return;
       }
       var reader = new FileReader();
-      reader.onload = (evt) => {
+      reader.onload = evt => {
         let result = evt.target.result;
         this.images = result;
-      }
+      };
       reader.readAsDataURL(file.files[0]);
     },
     toImage() {
       html2canvas(this.$refs.imageWrapper, {
         backgroundColor: null
-      }).then((canvas) => {
+      }).then(canvas => {
         let dataURL = canvas.toDataURL("image/png");
-       this.downloadFile('海报.png', dataURL) ;
+        this.downloadFile("海报.png", dataURL);
       });
     },
     downloadFile(fileName, content) {
@@ -81,7 +81,7 @@ export default {
       if (window.navigator.msSaveOrOpenBlob) {
         navigator.msSaveBlob(blob, fileName);
       } else {
-        const link = document.createElement('a');
+        const link = document.createElement("a");
         link.href = window.URL.createObjectURL(blob);
         link.download = fileName;
 
@@ -94,67 +94,65 @@ export default {
       }
     },
     base64ToBlob(code) {
-      const parts = code.split(';base64,');
-      const contentType = parts[0].split(':')[1];
+      const parts = code.split(";base64,");
+      const contentType = parts[0].split(":")[1];
       const raw = window.atob(parts[1]);
       const rawLength = raw.length;
       const uInt8Array = new Uint8Array(rawLength);
       for (let i = 0; i < rawLength; ++i) {
         uInt8Array[i] = raw.charCodeAt(i);
       }
-      return new Blob([uInt8Array], {type: contentType});
+      return new Blob([uInt8Array], { type: contentType });
     }
   }
-}
+};
 </script>
 
 <style scoped lang="less">
-  .meun-box {
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 80px;
-    padding: 10px 24px 0;
-  }
+.meun-box {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 80px;
+  padding: 10px 24px 0;
+}
 
-  .center-box {
-    padding-top: 100px;
-  }
+.center-box {
+  padding-top: 100px;
+}
 
-  .select-btn {
-    width: 90px;
-    height: 32px;
-    border: 1px solid #eee;
-    position: relative;
-    background-color: #00a0e9;
-    line-height: 31px;
-    border-radius: 4px;
-    color: white;
-    text-align: center;
-    display: inline-block;
-    margin-right: 8px;
+.select-btn {
+  width: 90px;
+  height: 32px;
+  border: 1px solid #eee;
+  position: relative;
+  background-color: #00a0e9;
+  line-height: 31px;
+  border-radius: 4px;
+  color: white;
+  text-align: center;
+  display: inline-block;
+  margin-right: 8px;
 
-    .seletImg {
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
+  .seletImg {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
+}
 
-  .image-box {
-    width: 300px;
-    height: auto;
-    overflow: hidden;
-    position: relative;
-    margin: auto;
-
-    .bg-img {
-      width: 100%;
-    }
+.image-box {
+  width: 300px;
+  height: auto;
+  overflow: hidden;
+  position: relative;
+  margin: auto;
 
+  .bg-img {
+    width: 100%;
   }
-
+}
 </style>