全局代码格式优化

2017-07-06 17:56:17 +08:00
parent 622a8c3a69
commit de992c50a6
73 changed files with 3156 additions and 3151 deletions
--- a/src/views/components/avatarUpload.vue
+++ b/src/views/components/avatarUpload.vue
@@ -4,45 +4,46 @@
    由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
    </code>

-    <PanThumb :image='image'>
-    </PanThumb>
+    <pan-thumb :image='image'></pan-thumb>
+
    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
    </el-button>

-    <ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess"
-      :key="imagecropperKey" v-show="imagecropperShow" />
+    <image-cropper :width="300" :height="300" url="https://httpbin.org/post" @close='close' @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
  </div>
 </template>

 <script>
-    import ImageCropper from 'components/ImageCropper';
-    import PanThumb from 'components/PanThumb';
-    export default {
-      components: { ImageCropper, PanThumb },
-      data() {
-        return {
-          imagecropperShow: false,
-          imagecropperKey: 0,
-          image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
-        }
-      },
-      methods: {
-        cropSuccess(resData) {
-          this.imagecropperShow = false;
-          this.imagecropperKey = this.imagecropperKey + 1;
-          this.image = resData.files.avatar;
-        },
-        close() {
-          this.imagecropperShow = false;
-        }
+  import ImageCropper from 'components/ImageCropper';
+  import PanThumb from 'components/PanThumb';
+
+  export default {
+    components: { ImageCropper, PanThumb },
+    data() {
+      return {
+        imagecropperShow: false,
+        imagecropperKey: 0,
+        image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
      }
-    };
+    },
+    methods: {
+      cropSuccess(resData) {
+        this.imagecropperShow = false;
+        this.imagecropperKey = this.imagecropperKey + 1;
+        this.image = resData.files.avatar;
+      },
+      close() {
+        this.imagecropperShow = false;
+      }
+    }
+  };
 </script>
+
 <style scoped>
-.avatar{
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-}
+  .avatar{
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+  }
 </style>

--- a/src/views/components/countTo.vue
+++ b/src/views/components/countTo.vue
@@ -3,7 +3,7 @@
    <code> <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>countTo component</a></code>

    <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
-      :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' />
+      :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false'></count-to>
    <div style='margin-left: 25%;margin-top: 40px;'>
      <label class="label" for="startValInput">startVal:  <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
      <label class="label" for="endValInput">endVal:  <input type="number" v-model.number='setEndVal' name='endVaInput' /></label>
@@ -22,72 +22,72 @@
 </template>

 <script>
-     import countTo from 'vue-count-to';
-     export default {
-       components: { countTo },
-       data() {
-         return {
-           setStartVal: 0,
-           setEndVal: 2017,
-           setDuration: 4000,
-           setDecimals: 0,
-           setSeparator: ',',
-           setSuffix: ' rmb',
-           setPrefix: '¥ '
-         }
-       },
-       computed: {
-         _startVal() {
-           if (this.setStartVal) {
-             return this.setStartVal
-           } else {
-             return 0
-           }
-         },
-         _endVal() {
-           if (this.setEndVal) {
-             return this.setEndVal
-           } else {
-             return 0
-           }
-         },
-         _duration() {
-           if (this.setDuration) {
-             return this.setDuration
-           } else {
-             return 100
-           }
-         },
-         _decimals() {
-           if (this.setDecimals) {
-             if (this.setDecimals < 0 || this.setDecimals > 20) {
-               alert('digits argument must be between 0 and 20')
-               return 0
-             }
-             return this.setDecimals
-           } else {
-             return 0
-           }
-         },
-         _separator() {
-           return this.setSeparator
-         },
-         _suffix() {
-           return this.setSuffix
-         },
-         _prefix() {
-           return this.setPrefix
-         }
-       },
-       methods: {
-         start() {
-           this.$refs.example.start();
-         },
-         pauseResume() {
-           this.$refs.example.pauseResume();
-         }
-       }
-     };
+  import countTo from 'vue-count-to';
+  export default {
+    components: { countTo },
+    data() {
+      return {
+        setStartVal: 0,
+        setEndVal: 2017,
+        setDuration: 4000,
+        setDecimals: 0,
+        setSeparator: ',',
+        setSuffix: ' rmb',
+        setPrefix: '¥ '
+      }
+    },
+    computed: {
+      _startVal() {
+        if (this.setStartVal) {
+          return this.setStartVal
+        } else {
+          return 0
+        }
+      },
+      _endVal() {
+        if (this.setEndVal) {
+          return this.setEndVal
+        } else {
+          return 0
+        }
+      },
+      _duration() {
+        if (this.setDuration) {
+          return this.setDuration
+        } else {
+          return 100
+        }
+      },
+      _decimals() {
+        if (this.setDecimals) {
+          if (this.setDecimals < 0 || this.setDecimals > 20) {
+            alert('digits argument must be between 0 and 20')
+            return 0
+          }
+          return this.setDecimals
+        } else {
+          return 0
+        }
+      },
+      _separator() {
+        return this.setSeparator
+      },
+      _suffix() {
+        return this.setSuffix
+      },
+      _prefix() {
+        return this.setPrefix
+      }
+    },
+    methods: {
+      start() {
+        this.$refs.example.start();
+      },
+      pauseResume() {
+        this.$refs.example.pauseResume();
+      }
+    }
+  };
 </script>

 <style scoped>
--- a/src/views/components/dndlist.vue
+++ b/src/views/components/dndlist.vue
@@ -2,35 +2,37 @@
  <div class="components-container">
    <code>drag-list base on <a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a></code>
    <div class="editor-container">
-       <DndList :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池" />
+       <dnd-list :list1="list1" :list2="list2" list1Title="头条列表" list2Title="文章池"></dnd-list>
    </div>
  </div>
 </template>
+
 <script>
-    import DndList from 'components/twoDndList'
-    import { getList } from 'api/article';
-    export default {
-      components: { DndList },
-      data() {
-        return {
-          list1: [],
-          list2: []
-        }
-      },
-      created() {
-        this.fetchData();
-      },
-      methods: {
-        fetchData() {
-          this.listLoading = true;
-          getList(this.listQuery).then(response => {
-            this.list1 = response.data.splice(0, 5);
-            this.list2 = response.data;
-            console.log(this.list1, this.list2)
-          })
-        }
+  import DndList from 'components/twoDndList'
+  import { getList } from 'api/article';
+
+  export default {
+    components: { DndList },
+    data() {
+      return {
+        list1: [],
+        list2: []
      }
-    };
+    },
+    created() {
+      this.fetchData();
+    },
+    methods: {
+      fetchData() {
+        this.listLoading = true;
+        getList(this.listQuery).then(response => {
+          this.list1 = response.data.splice(0, 5);
+          this.list2 = response.data;
+          console.log(this.list1, this.list2)
+        })
+      }
+    }
+  };
 </script>


--- a/src/views/components/dropzone.vue
+++ b/src/views/components/dropzone.vue
@@ -4,27 +4,27 @@
      由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
    </code>
    <div class="editor-container">
-     <Dropzone  v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone"
-            url="https://httpbin.org/post"></Dropzone>
+      <dropzone v-on:dropzone-removedFile="dropzoneR" v-on:dropzone-success="dropzoneS" id="myVueDropzone" url="https://httpbin.org/post"></dropzone>
    </div>
  </div>
 </template>
-<script>
-    import Dropzone from 'components/Dropzone';

-    export default {
-      components: { Dropzone },
-      methods: {
-        dropzoneS(file) {
-          console.log(file)
-          this.$message({ message: '上传成功', type: 'success' });
-        },
-        dropzoneR(file) {
-          console.log(file)
-          this.$message({ message: '删除成功', type: 'success' });
-        }
+<script>
+  import Dropzone from 'components/Dropzone';
+
+  export default {
+    components: { Dropzone },
+    methods: {
+      dropzoneS(file) {
+        console.log(file)
+        this.$message({ message: '上传成功', type: 'success' });
+      },
+      dropzoneR(file) {
+        console.log(file)
+        this.$message({ message: '删除成功', type: 'success' });
      }
-    };
+    }
+  };
 </script>


--- a/src/views/components/jsoneditor.vue
+++ b/src/views/components/jsoneditor.vue
@@ -8,16 +8,17 @@
 </template>

 <script>
-    import jsonEditor from 'components/jsonEditor';
-    const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
-    export default {
-      components: { jsonEditor },
-      data() {
-        return {
-          value: JSON.parse(jsonData)
-        }
+  import jsonEditor from 'components/jsonEditor';
+  const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
+
+  export default {
+    components: { jsonEditor },
+    data() {
+      return {
+        value: JSON.parse(jsonData)
      }
-    };
+    }
+  };
 </script>

 <style scoped>
--- a/src/views/components/markdown.vue
+++ b/src/views/components/markdown.vue
@@ -2,7 +2,7 @@
  <div class="components-container">
    <code>Markdown 我们这里选用了 <a href="https://github.com/sparksuite/simplemde-markdown-editor" target="_blank">simplemde-markdown-editor</a> ，简单的用vue封装了一下<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader14'> 相关文章 </a></code>
    <div class="editor-container">
-      <MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
+      <md-editor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></md-editor>
    </div>
    <el-button @click='markdown2Html' style="margin-top:80px;" type="primary">转为HTML<i class="el-icon-document el-icon--right"></i></el-button>
    <div v-html="html"></div>
@@ -10,24 +10,24 @@
 </template>

 <script>
-    import MdEditor from 'components/MdEditor';
-    export default {
-      components: { MdEditor },
-      data() {
-        return {
-          content: '## Simplemde',
-          html: ''
-        }
-      },
-      methods: {
-        markdown2Html() {
-          import('showdown').then(showdown => {
-            const converter = new showdown.Converter();
-            this.html = converter.makeHtml(this.content)
-          })
-        }
+  import MdEditor from 'components/MdEditor';
+  export default {
+    components: { MdEditor },
+    data() {
+      return {
+        content: '## Simplemde',
+        html: ''
      }
-    };
+    },
+    methods: {
+      markdown2Html() {
+        import('showdown').then(showdown => {
+          const converter = new showdown.Converter();
+          this.html = converter.makeHtml(this.content)
+        })
+      }
+    }
+  };
 </script>


--- a/src/views/components/mixin.vue
+++ b/src/views/components/mixin.vue
@@ -1,16 +1,16 @@
 <template>
  <div class="components-container">
    <div class='component-item'>
-      <MDinput name="name" v-model="title" required :maxlength="100">
+      <md-input name="name" v-model="title" required :maxlength="100">
        标题
-      </MDinput>
+      </md-input>
      <code class='code-part'>Material Design 的input</code>
    </div>

    <div class='component-item'>
-      <PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+      <pan-thumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
        上海花裤衩
-      </PanThumb>
+      </pan-thumb>
      <code class='code-part'>图片hover效果</code>
    </div>

@@ -18,21 +18,21 @@
      <el-button v-waves type="primary">水波纹效果</el-button>
      <code class='code-part'>水波纹 v-directive</code>
    </div>
-
  </div>
 </template>
-<script>
-    import MDinput from 'components/MDinput';
-    import PanThumb from 'components/PanThumb';

-    export default {
-      components: { MDinput, PanThumb },
-      data() {
-        return {
-          title: ''
-        }
+<script>
+  import MdInput from 'components/MDinput';
+  import PanThumb from 'components/PanThumb';
+
+  export default {
+    components: { MdInput, PanThumb },
+    data() {
+      return {
+        title: ''
      }
-    };
+    }
+  };
 </script>

 <style scoped>
--- a/src/views/components/splitpane.vue
+++ b/src/views/components/splitpane.vue
@@ -1,62 +1,65 @@
 <template>
-    <div class="components-container" >
-      <code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'>codepen</a>,<a href='https://jsfiddle.net/' target='_blank'>jsfiddle</a>就不会陌生了
+	<div class="components-container">
+		<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'>codepen</a>,<a href='https://jsfiddle.net/' target='_blank'>jsfiddle</a>就不会陌生了
      暂还没有时间开源封装好，日后补上
      </code>
-        <splitPane v-on:resize="resize" split="vertical">
-            <template slot="paneL">
-                <div class="left-container"></div>
-            </template>
-            <template slot="paneR">
-                <split-pane split="horizontal">
-                    <template slot="paneL">
-                        <div class="top-container"></div>
-                    </template>
-                    <template slot="paneR">
-                        <div class="bottom-container">
-                        </div>
-                    </template>
-                </split-pane>
-            </template>
-        </splitPane>
-    </div>
+		<split-pane v-on:resize="resize" split="vertical">
+			<template slot="paneL">
+				<div class="left-container"></div>
+			</template>
+			<template slot="paneR">
+				<split-pane split="horizontal">
+					<template slot="paneL">
+						<div class="top-container"></div>
+					</template>
+					<template slot="paneR">
+						<div class="bottom-container">
+						</div>
+					</template>
+				</split-pane>
+			</template>
+		</split-pane>
+	</div>
 </template>

 <script>
-    import splitPane from 'components/SplitPane'
-    export default {
-      components: { splitPane },
-      methods: {
-        resize() {
-          console.log('resize')
-        }
+  import splitPane from 'components/SplitPane'
+
+  export default {
+    components: { splitPane },
+    methods: {
+      resize() {
+        console.log('resize')
      }
-    };
+    }
+  };
 </script>
+
 <style  scoped>
-    .components-container{
-        position: relative;
-        height: 100vh;
-    }
-    .left-container {
-        background-color: #F38181;
-        height:100%;
-    }
+	.components-container {
+		position: relative;
+		height: 100vh;
+	}

-    .right-container {
-        background-color: #FCE38A;
-        height: 200px;
-    }
+	.left-container {
+		background-color: #F38181;
+		height: 100%;
+	}

-    .top-container {
-        background-color: #FCE38A;
-        width: 100%;
-        height: 100%;
-    }
+	.right-container {
+		background-color: #FCE38A;
+		height: 200px;
+	}

-    .bottom-container {
-        width: 100%;
-        background-color: #95E1D3;
-        height: 100%;
-    }
+	.top-container {
+		background-color: #FCE38A;
+		width: 100%;
+		height: 100%;
+	}
+
+	.bottom-container {
+		width: 100%;
+		background-color: #95E1D3;
+		height: 100%;
+	}
 </style>
--- a/src/views/components/sticky.vue
+++ b/src/views/components/sticky.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Sticky className="sub-navbar">
+    <sticky className="sub-navbar">
      <el-dropdown trigger="click">
        <el-button>
          平台<i class="el-icon-caret-bottom el-icon--right"></i>
@@ -32,7 +32,7 @@

      <el-button style="margin-left: 10px;" type="success">发布
      </el-button>
-    </Sticky>
+    </sticky>

    <div class="components-container">
      <code>Sticky header 当页面滚动到预设的位置会吸附在顶部</code>
@@ -90,33 +90,34 @@
      <div>我是占位</div>
    </div>
  </div>
-
 </template>
-<script>
-    import Sticky from 'components/Sticky';

-    export default {
-      components: { Sticky },
-      data() {
-        return {
-          time: '',
-          url: '',
-          platforms: ['a-platform'],
-          platformsOptions: [
+
+<script>
+  import Sticky from 'components/Sticky';
+
+  export default {
+    components: { Sticky },
+    data() {
+      return {
+        time: '',
+        url: '',
+        platforms: ['a-platform'],
+        platformsOptions: [
            { key: 'a-platform', name: '平台A' },
            { key: 'b-platform', name: '平台B' },
            { key: 'c-platform', name: '平台C' }
-          ],
-          pickerOptions: {
-            disabledDate(time) {
-              return time.getTime() > Date.now();
-            }
+        ],
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
          }
        }
      }
-
-    };
+    }
+  };
 </script>
+
 <style scoped>
  .time-container {
    display: inline-block;
--- a/src/views/components/tinymce.vue
+++ b/src/views/components/tinymce.vue
@@ -9,16 +9,16 @@
 </template>

 <script>
-    import Tinymce from 'components/Tinymce';
+  import Tinymce from 'components/Tinymce';

-    export default {
-      components: { Tinymce },
-      data() {
-        return {
-          content: 'Tinymce'
-        }
+  export default {
+    components: { Tinymce },
+    data() {
+      return {
+        content: 'Tinymce'
      }
-    };
+    }
+  };
 </script>

 <style scoped>