From 168150ff2038a8254ef0dc9deac0d980e86981c2 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 26 Apr 2017 14:50:36 +0800
Subject: [PATCH] refine code

---
 src/components/Charts/keyboard.vue |   3 +-
 src/components/MDinput/index.vue   | 158 +++++------------------------
 src/components/MdEditor/index.vue  |  17 ++--
 src/components/PanThumb/index.vue  |   2 +-
 src/components/Tinymce/index.vue   |  14 ++-
 src/directive/sticky.js            |  14 ++-
 src/router/index.js                |   1 -
 src/views/components/markdown.vue  |   2 +-
 8 files changed, 54 insertions(+), 157 deletions(-)

diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 8b866d8..8b34976 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -105,8 +105,7 @@
                   return idx * 20;
                 }
               }]
-            }
-                )
+            })
         }
       }
     }
diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue
index 277f2e2..c0164cc 100644
--- a/src/components/MDinput/index.vue
+++ b/src/components/MDinput/index.vue
@@ -1,127 +1,23 @@
 <template>
     <div class="material-input__component" :class="computedClasses">
-        <input
-                v-if="type === 'email'"
-                type="email"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
-        <input
-                v-if="type === 'url'"
-                type="url"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
-        <input
-                v-if="type === 'number'"
-                type="number"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :max="max"
-                :min="min"
-                :minlength="minlength"
-                :maxlength="maxlength"
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
-        <input
-                v-if="type === 'password'"
-                type="password"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :max="max"
-                :min="min"
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
-        <input
-                v-if="type === 'tel'"
-                type="tel"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
-        <input
-                v-if="type === 'text'"
-                type="text"
-                class="material-input"
-                :name="name"
-                :id="id"
-                :placeholder="placeholder"
-                v-model="valueCopy"
-
-                :readonly="readonly"
-                :disabled="disabled"
-                :autocomplete="autocomplete"
-
-                :minlength="minlength"
-                :maxlength="maxlength"
-                :required="required"
-
-                @focus="handleFocus(true)"
-                @blur="handleFocus(false)"
-                @input="handleModelInput"
-        >
+        <input v-if="type === 'email'" type="email" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+            @blur="handleFocus(false)" @input="handleModelInput">
+        <input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+            @blur="handleFocus(false)" @input="handleModelInput">
+        <input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength"
+            :maxlength="maxlength" :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+        <input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
+            v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min"
+            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+        <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+            @blur="handleFocus(false)" @input="handleModelInput">
+        <input v-if="type === 'text'" type="text" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+            :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
+            :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
 
         <span class="material-input-bar"></span>
 
@@ -137,6 +33,7 @@
 </template>
 
 <script>
+    // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
     export default {
       name: 'material-input',
       computed: {
@@ -148,12 +45,8 @@
           return {
             'material--active': this.focus,
             'material--disabled': this.disabled,
-            'material--has-errors': Boolean(
-                            !this.valid ||
-                            (this.errorMessages && this.errorMessages.length)),
-            'material--raised': Boolean(
-                            this.focus ||
-                            this.valueCopy || // has value
+            'material--has-errors': Boolean(!this.valid || (this.errorMessages && this.errorMessages.length)),
+            'material--raised': Boolean(this.focus || this.valueCopy || // has value
                             (this.placeholder && !this.valueCopy)) // has placeholder
           }
         }
@@ -166,8 +59,8 @@
         }
       },
       beforeMount() {
-            // Here we are following the Vue2 convention on custom v-model:
-            // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
+        // Here we are following the Vue2 convention on custom v-model:
+        // https://github.com/vuejs/vue/issues/2873#issuecomment-223759341
         this.copyValue(this.value)
       },
       methods: {
@@ -179,8 +72,7 @@
           this.focus = focused
         },
         handleValidation() {
-          this.valid = this.$el ? this.$el.querySelector(
-                        '.material-input').validity.valid : this.valid
+          this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
         },
         copyValue(value) {
           this.valueCopy = value
@@ -388,8 +280,6 @@
         }
         // Errors:
         &.material--has-errors {
-            // These styles are required
-            // for custom validation:
             &.material--active .material-label {
                 color: $color-red;
             }
diff --git a/src/components/MdEditor/index.vue b/src/components/MdEditor/index.vue
index 493f8b5..590b8b1 100644
--- a/src/components/MdEditor/index.vue
+++ b/src/components/MdEditor/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='simplemde-container'>
+  <div class='simplemde-container' :style="{height:height+'px',zIndex:zIndex}">
     <textarea :id='id'>
     </textarea>
   </div>
@@ -24,11 +24,16 @@ export default {
       type: String,
       default: ''
     },
+    height: {
+      type: Number,
+      default: 150
+    },
+    zIndex: {
+      type: Number,
+      default: 10
+    },
     toolbar: {
       type: Array
-      // default() {
-      //   return ['bold', '|', 'link']
-      // }
     }
   },
   data() {
@@ -58,7 +63,6 @@ export default {
     if (this.value) {
       this.simplemde.value(this.value);
     }
-
     this.simplemde.codemirror.on('change', () => {
       if (this.hasChange) {
         this.hasChange = true
@@ -74,7 +78,7 @@ export default {
 
 <style>
   .simplemde-container .CodeMirror {
-    height: 150px;
+    /*height: 150px;*/
     min-height: 150px;
   }
   .simplemde-container .CodeMirror-scroll{
@@ -102,7 +106,6 @@ export default {
     font-weight: bold;
     color: #E61E1E;
   }
-
 </style>
 
 
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index be63aff..00b2b2e 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -2,7 +2,7 @@
     <div class="pan-item" :style="{zIndex:zIndex,height:height,width:width}">
         <div class="pan-info">
             <div class="pan-info-roles-container">
-                <slot>pan</slot>
+                <slot></slot>
             </div>
         </div>
         <img class="pan-thumb" :src="image">
diff --git a/src/components/Tinymce/index.vue b/src/components/Tinymce/index.vue
index 70cf4d1..77ccff7 100644
--- a/src/components/Tinymce/index.vue
+++ b/src/components/Tinymce/index.vue
@@ -1,24 +1,29 @@
 <template>
   <div class='tinymce-container editor-container'>
     <textarea class='tinymce-textarea' :id="id"></textarea>
+    <!--业务需求可删除-->
     <div class="editor-custom-btn-container">
       <editorSlide v-if="customButton.indexOf('editorSlide')>=0" color="#3A71A8" class="editor-upload-btn" @successCBK="slideSuccessCBK"></editorSlide>
       <editorAudio v-if="customButton.indexOf('editorAudio')>=0" color="#30B08F" class="editor-upload-btn" @successCBK="aduioSuccessCBK"></editorAudio>
       <editorVideo v-if="customButton.indexOf('editorVideo')>=0" color="#E65D6E" class="editor-upload-btn" @successCBK="videoSuccessCBK"></editorVideo>
        <editorImage v-if="customButton.indexOf('editorImage')>=0" color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+     <!--业务需求可删除-->
     </div>
   </div>
 </template>
 
 <script>
+    // tinymce 在最外层目录static下 ，由index.html直接引入，挂载在window下。不通过impot，不打包
+    // 业务需求可删除
     import editorAudio from './components/editorAudio';
     import editorVideo from './components/editorVideo';
     import editorSlide from './components/editorSlide';
     import editorImage from './components/editorImage';
-    import { getToken, upload } from 'api/qiniu';
+    import { getToken, upload } from 'api/qiniu'; // 七牛
+    // 业务需求可删除
     export default {
       name: 'tinymce',
-      components: { editorImage, editorAudio, editorSlide, editorVideo },
+      components: { editorImage, editorAudio, editorSlide, editorVideo }, // 业务需求可删除
       props: {
         id: {
           type: String,
@@ -100,6 +105,7 @@
               this.$emit('input', editor.getContent({ format: 'raw' }));
             });
           },
+          // 整合七牛上传
           // images_dataimg_filter(img) {
           //   setTimeout(() => {
           //     const $image = $(img);
@@ -149,7 +155,7 @@
               }
             });
             editor.addButton('p', {
-              title: '正文', // tooltip text seen on mouseover
+              title: '正文',
               text: '正文',
               onclick() {
                 editor.execCommand('mceToggleFormat', false, 'p');
@@ -167,6 +173,7 @@
         });
       },
       methods: {
+        /* 业务代码可删除 start*/
         imageSuccessCBK(arr) {
           console.log(arr)
           const _this = this;
@@ -212,6 +219,7 @@
           node.className = 'wscnph editor-placeholder';
           tinymce.get(this.id).insertContent(node.outerHTML)
         }
+        /* 业务代码可删除 end*/
       },
       destroyed() {
         tinymce.get(this.id).destroy();
diff --git a/src/directive/sticky.js b/src/directive/sticky.js
index db0d28e..7eb9e0f 100644
--- a/src/directive/sticky.js
+++ b/src/directive/sticky.js
@@ -11,14 +11,12 @@
 
         elStyle.position = '-webkit-sticky';
         elStyle.position = 'sticky';
-
-                // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
-                // if (~elStyle.position.indexOf('sticky')) {
-                //     elStyle.top = `${stickyTop}px`;
-                //     elStyle.zIndex = zIndex;
-                //     return
-                // }
-
+        // if the browser support css sticky（Currently Safari, Firefox and Chrome Canary）
+        // if (~elStyle.position.indexOf('sticky')) {
+        //     elStyle.top = `${stickyTop}px`;
+        //     elStyle.zIndex = zIndex;
+        //     return
+        // }
         const elHeight = el.getBoundingClientRect().height;
         const elWidth = el.getBoundingClientRect().width;
         elStyle.cssText = `top: ${stickyTop}px; z-index: ${zIndex}`;
diff --git a/src/router/index.js b/src/router/index.js
index 1dbd710..a1eb102 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,6 @@ import Router from 'vue-router';
 import Layout from '../views/layout/Layout';
 
 // dashboard
-// import dashboard from '../views/dashboard/index';
 const dashboard = resolve => require(['../views/dashboard/index'], resolve);
 
 /* error page*/
diff --git a/src/views/components/markdown.vue b/src/views/components/markdown.vue
index 3bf5e1a..ae42136 100644
--- a/src/views/components/markdown.vue
+++ b/src/views/components/markdown.vue
@@ -2,7 +2,7 @@
   <div class="components-container">
     <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
     <div class="editor-container">
-      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
+      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="300" :zIndex='20'></MdEditor>
     </div>
   </div>
 </template>
-- 
GitLab