refine code && document

src/views/components/countTo.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="components-container">
-    <code>countTo 组件 <a href='https://github.com/PanJiaChen/vue-countTo' target='_blank'>线上地址</a></code>
+    <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'
+    <count-to ref='example' class='example' :start-val='_startVal' :end-val='_endVal' :duration='_duration' :decimals='_decimals'
       :separator='_separator' :prefix='_prefix' :suffix='_suffix' :autoplay='false' />
     <div style='margin-left: 25%;margin-top: 40px;'>
       <label class="label" for="startValInput">startVal:  <input type="number" v-model.number='setStartVal' name='startValInput' /></label>
@@ -20,9 +20,9 @@
             :separator=&#x27;{{_separator}}&#x27; :prefix=&#x27;{{_prefix}}&#x27; :suffix=&#x27;{{_suffix}}&#x27; :autoplay=false&gt;</code>
   </div>
 </template>
+
 <script>
      import countTo from 'vue-count-to';
-
      export default {
        components: { countTo },
        data() {

src/views/components/dndlist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="components-container">
-    <code>拖拽https://github.com/SortableJS/Vue.Draggable 项目：Vue.Draggable</code>
+    <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="文章池" />
     </div>

src/views/components/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components-container">
-    <code>这里暂时列出了自己在项目中自己封装和用到的组件，如有补充可以提<a href='https://github.com/PanJiaChen/vue-element-admin/issues' target='_blank'>issue</a><br/>
-    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，很多时候第三方封装是满足不了需求的，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
+    <code>这里暂时列出了自己在项目中用到的组件和一些自己封装的组件，如有补充可以提<a target='_blank' href='https://github.com/PanJiaChen/vue-element-admin/issues'> issue </a><br/>
+    我个人崇尚自己封装组件，因为很多组件会和业务后高度的耦合，而且第三方封装的组件灵活性可控性都不高，如有需要可以看楼主之前写过的一篇<a href='https://segmentfault.com/a/1190000009090836' target='_blank'>文章</a>
     </code>
   </div>
 </template>

src/views/components/jsoneditor.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="components-container" style='height:100vh'>
-    <code>有校验</code>
+    <code>jsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>
     </div>
   </div>
 </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":"能源化工"}]';
@@ -21,8 +22,8 @@
 
 <style scoped>
 .editor-container{
-    position: relative;
-    height: 100%;
+  position: relative;
+  height: 100%;
 }
 </style>
 

src/views/components/markdown.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <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>
+      <MdEditor id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
     </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>
   </div>
 </template>
+
 <script>
     import MdEditor from 'components/MdEditor';
-
     export default {
       components: { MdEditor },
       data() {
         return {
-          content: 'Simplemde',
+          content: '## Simplemde',
           html: ''
         }
       },