修改MDinput组件

1.使之能兼容elementui的表单验证功能
2.增加icon属性，能够使用elementui的图标
3.优化显示效果

src/components/MDinput/index.vue

@@ -1,147 +1,132 @@
 <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"
+    <div :class="{iconClass:icon}">
-      :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+      <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
-      @blur="handleFocus(false)" @input="handleModelInput">
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name"
-    <input v-if="type === 'url'" type="url" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+             :placeholder="fillPlaceHolder" v-model="currentValue"
-      :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
-      @blur="handleFocus(false)" @input="handleModelInput">
+             @focus="handleMdFocus"
-    <input v-if="type === 'number'" type="number" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+             @blur="handleMdBlur" @input="handleModelInput">
-      :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :minlength="minlength" :maxlength="maxlength"
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name"
-      :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+             :placeholder="fillPlaceHolder"
-    <input v-if="type === 'password'" type="password" class="material-input" :name="name" :id="id" :placeholder="placeholder"
+             v-model="currentValue"
-      v-model="valueCopy" :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :max="max" :min="min" :required="required"
+             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
-      @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+             @focus="handleMdFocus"
-    <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :id="id" :placeholder="placeholder" v-model="valueCopy"
+             @blur="handleMdBlur" @input="handleModelInput">
-      :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :required="required" @focus="handleFocus(true)"
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name"
-      @blur="handleFocus(false)" @input="handleModelInput">
+             :placeholder="fillPlaceHolder" v-model="currentValue" :step="step"
-    <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" :max="max" :min="min"
-      :readonly="readonly" :disabled="disabled" :autocomplete="autocomplete" :minlength="minlength" :maxlength="maxlength"
+             :minlength="minlength" :maxlength="maxlength"
-      :required="required" @focus="handleFocus(true)" @blur="handleFocus(false)" @input="handleModelInput">
+             :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name"
+             :placeholder="fillPlaceHolder"
+             v-model="currentValue" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max"
+             :min="min" :required="required"
+             @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name"
+             :placeholder="fillPlaceHolder"
+             v-model="currentValue"
+             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
+             @focus="handleMdFocus"
+             @blur="handleMdBlur" @input="handleModelInput">
+      <input v-if="type === 'text'" type="text" class="material-input" :name="name"
+             :placeholder="fillPlaceHolder" v-model="currentValue"
+             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength"
+             :maxlength="maxlength"
+             :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
 
       <span class="material-input-bar"></span>
 
       <label class="material-label">
         <slot></slot>
       </label>
-    <div v-if="errorMessages" class="material-errors">
+
-      <div v-for="error in computedErrors" class="material-error" :key='error'>
-        {{ error }}
-      </div>
     </div>
   </div>
 </template>
 
 <script>
   // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
-export default {
+
-  name: 'material-input',
+  export default {
+
+    name: 'md-input',
     computed: {
-    computedErrors() {
-      return typeof this.errorMessages === 'string'
-                        ? [this.errorMessages] : this.errorMessages
-    },
       computedClasses() {
         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.currentValue) // has value
-        'material--raised': Boolean(this.focus || this.valueCopy || // has value
-                            (this.placeholder && !this.valueCopy)) // has placeholder
         }
       }
     },
     data() {
       return {
-      valueCopy: null,
+        currentValue: this.value,
         focus: false,
-      valid: true
+        fillPlaceHolder: null
       }
     },
-  beforeMount() {
-        // 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: {
       handleModelInput(event) {
-      this.$emit('input', event.target.value, event)
+        const value = event.target.value
-      this.handleValidation()
+        this.$emit('input', value)
+        if (this.$parent.$options.componentName === 'ElFormItem') {
+          if (this.validateEvent) {
+            this.$parent.$emit('el.form.change', [value])
+          }
+        }
+        this.$emit('change', value)
+//				this.handleValidation()
       },
-    handleFocus(focused) {
+      handleMdFocus(event) {
-      this.focus = focused
+        this.focus = true
-    },
+        this.$emit('focus', event)
-    handleValidation() {
+        if (this.placeholder && this.placeholder !== '') {
-      this.valid = this.$el ? this.$el.querySelector('.material-input').validity.valid : this.valid
+          this.fillPlaceHolder = this.placeholder
-    },
-    copyValue(value) {
-      this.valueCopy = value
-      this.handleValidation()
         }
       },
-  watch: {
+      handleMdBlur(event) {
-    value(newValue) {
+        this.focus = false
-      this.copyValue(newValue)
+        this.$emit('blur', event)
+        this.fillPlaceHolder = null
+        if (this.$parent.$options.componentName === 'ElFormItem') {
+          if (this.validateEvent) {
+            this.$parent.$emit('el.form.blur', [this.currentValue])
+          }
+        }
       }
     },
     props: {
-    id: {
+      icon: String,
-      type: String,
+      name: String,
-      default: null
-    },
-    name: {
-      type: String,
-      default: null
-    },
       type: {
         type: String,
         default: 'text'
       },
-    value: {
+      value: [String, Number],
-      default: null
+      placeholder: String,
-    },
+      readonly: Boolean,
-    placeholder: {
+      disabled: Boolean,
-      type: String,
+      min: String,
-      default: null
+      max: String,
-    },
+      step: String,
-    readonly: {
+      minlength: Number,
-      type: Boolean,
+      maxlength: Number,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    min: {
-      type: String,
-      default: null
-    },
-    max: {
-      type: String,
-      default: null
-    },
-    minlength: {
-      type: Number,
-      default: null
-    },
-    maxlength: {
-      type: Number,
-      default: null
-    },
       required: {
         type: Boolean,
         default: true
       },
-    autocomplete: {
+      autoComplete: {
         type: String,
         default: 'off'
       },
-    errorMessages: {
+      validateEvent: {
-      type: [Array, String],
+        type: Boolean,
-      default: null
+        default: true
+      }
     }
   }
-}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
@@ -150,9 +135,20 @@ export default {
   $font-size-small: 18px;
   $font-size-smallest: 12px;
   $font-weight-normal: normal;
+  $font-weight-bold: bold;
+  $apixel: 1px;
   // Utils
   $spacer: 12px;
   $transition: 0.2s ease all;
+  $index: 0px;
+  $index-has-icon: 30px;
+  // Theme:
+  $color-white: white;
+  $color-grey: #9E9E9E;
+  $color-grey-light: #E0E0E0;
+  $color-blue: #2196F3;
+  $color-red: #F44336;
+  $color-black: black;
   // Base clases:
   %base-bar-pseudo {
     content: '';
@@ -165,23 +161,45 @@ export default {
 
   // Mixins:
   @mixin slided-top() {
-        top: -2 * $spacer;
+    top: - ($font-size-base + $spacer);
-        font-size: $font-size-small;
+    left: 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-bold;
   }
 
   // Component:
   .material-input__component {
-        /*margin-top: 30px;*/
+    margin-top: 36px;
     position: relative;
     * {
       box-sizing: border-box;
     }
+    .iconClass {
+      .material-input__icon {
+        position: absolute;
+        left: 0;
+        color: $color-blue;
+        top: $spacer;
+        width: $index-has-icon;
+        height: $font-size-base;
+        font-size: $font-size-base;
+        font-weight: $font-weight-normal;
+        pointer-events: none;
+      }
+      .material-label {
+        left: $index-has-icon;
+      }
+      .material-input {
+        text-indent: $index-has-icon;
+      }
+    }
     .material-input {
       font-size: $font-size-base;
-            padding: $spacer $spacer $spacer $spacer / 2;
+      padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
       display: block;
       width: 100%;
       border: none;
+      line-height: 1;
       border-radius: 0;
       &:focus {
         outline: none;
@@ -190,13 +208,13 @@ export default {
       }
     }
     .material-label {
-            font-size: $font-size-base;
       font-weight: $font-weight-normal;
       position: absolute;
       pointer-events: none;
-            left: 0;
+      left: $index;
-            top: $spacer;
+      top: 0;
       transition: $transition;
+      font-size: $font-size-small;
     }
     .material-input-bar {
       position: relative;
@@ -232,35 +250,14 @@ export default {
         }
       }
     }
-        // Errors:
-        .material-errors {
-            position: relative;
-            overflow: hidden;
-            .material-error {
-                font-size: $font-size-smallest;
-                line-height: $font-size-smallest + 2px;
-                overflow: hidden;
-                margin-top: 0;
-                padding-top: $spacer / 2;
-                padding-right: $spacer / 2;
-                padding-left: 0;
-            }
-        }
   }
 
-    // Theme:
-    $color-white: white;
-    $color-grey: #9E9E9E;
-    $color-grey-light: #E0E0E0;
-    $color-blue: #2196F3;
-    $color-red: #F44336;
-    $color-black: black;
   .material-input__component {
     background: $color-white;
     .material-input {
       background: none;
       color: $color-black;
-            text-indent: 30px;
+      text-indent: $index;
       border-bottom: 1px solid $color-grey-light;
     }
     .material-label {
@@ -286,12 +283,12 @@ export default {
       .material-input-bar {
         &:before,
         &:after {
-                    background: $color-red;
+          background: transparent;
         }
       }
-            .material-errors {
+      /*.material-errors {
                 color: $color-red;
-            }
+            }*/
     }
   }
 </style>