refine : format code

src/components/MDinput/index.vue

@@ -2,131 +2,112 @@
   <div class="material-input__component" :class="computedClasses">
     <div :class="{iconClass:icon}">
       <i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
-      <input v-if="type === 'email'" type="email" class="material-input" :name="name"
+      <input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-             :placeholder="fillPlaceHolder" v-model="currentValue"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
+        @blur="handleMdBlur" @input="handleModelInput">
-             @focus="handleMdFocus"
+      <input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-             @blur="handleMdBlur" @input="handleModelInput">
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-      <input v-if="type === 'url'" type="url" class="material-input" :name="name"
+        @blur="handleMdBlur" @input="handleModelInput">
-             :placeholder="fillPlaceHolder"
+      <input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-             v-model="currentValue"
+        :step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
-             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
+        :maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-             @focus="handleMdFocus"
+      <input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-             @blur="handleMdBlur" @input="handleModelInput">
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
-      <input v-if="type === 'number'" type="number" class="material-input" :name="name"
+        @blur="handleMdBlur" @input="handleModelInput">
-             :placeholder="fillPlaceHolder" v-model="currentValue" :step="step"
+      <input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
-             :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
-             :minlength="minlength" :maxlength="maxlength"
+        @blur="handleMdBlur" @input="handleModelInput">
-             :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"
-      <input v-if="type === 'password'" type="password" class="material-input" :name="name"
+        :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
-             :placeholder="fillPlaceHolder"
+        :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
-             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>
   </div>
 </template>
 
 <script>
-  // source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
+// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
 
-  export default {
+export default {
-
+  name: 'md-input',
-    name: 'md-input',
+  props: {
-    computed: {
+    icon: String,
-      computedClasses() {
+    name: String,
-        return {
+    type: {
-          'material--active': this.focus,
+      type: String,
-          'material--disabled': this.disabled,
+      default: 'text'
-          'material--raised': Boolean(this.focus || this.currentValue) // has value
-        }
-      }
     },
-    data() {
+    value: [String, Number],
+    placeholder: String,
+    readonly: Boolean,
+    disabled: Boolean,
+    min: String,
+    max: String,
+    step: String,
+    minlength: Number,
+    maxlength: Number,
+    required: {
+      type: Boolean,
+      default: true
+    },
+    autoComplete: {
+      type: String,
+      default: 'off'
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    computedClasses() {
       return {
-        currentValue: this.value,
+        'material--active': this.focus,
-        focus: false,
+        'material--disabled': this.disabled,
-        fillPlaceHolder: null
+        'material--raised': Boolean(this.focus || this.currentValue) // has value
       }
-    },
+    }
-    methods: {
+  },
-      handleModelInput(event) {
+  data() {
-        const value = event.target.value
+    return {
-        this.$emit('input', value)
+      currentValue: this.value,
-        if (this.$parent.$options.componentName === 'ElFormItem') {
+      focus: false,
-          if (this.validateEvent) {
+      fillPlaceHolder: null
-            this.$parent.$emit('el.form.change', [value])
+    }
-          }
+  },
-        }
+  methods: {
-        this.$emit('change', value)
+    handleModelInput(event) {
-//				this.handleValidation()
+      const value = event.target.value
-      },
+      this.$emit('input', value)
-      handleMdFocus(event) {
+      if (this.$parent.$options.componentName === 'ElFormItem') {
-        this.focus = true
+        if (this.validateEvent) {
-        this.$emit('focus', event)
+          this.$parent.$emit('el.form.change', [value])
-        if (this.placeholder && this.placeholder !== '') {
-          this.fillPlaceHolder = this.placeholder
-        }
-      },
-      handleMdBlur(event) {
-        this.focus = false
-        this.$emit('blur', event)
-        this.fillPlaceHolder = null
-        if (this.$parent.$options.componentName === 'ElFormItem') {
-          if (this.validateEvent) {
-            this.$parent.$emit('el.form.blur', [this.currentValue])
-          }
         }
       }
+      this.$emit('change', value)
     },
-    props: {
+    handleMdFocus(event) {
-      icon: String,
+      this.focus = true
-      name: String,
+      this.$emit('focus', event)
-      type: {
+      if (this.placeholder && this.placeholder !== '') {
-        type: String,
+        this.fillPlaceHolder = this.placeholder
-        default: 'text'
+      }
-      },
+    },
-      value: [String, Number],
+    handleMdBlur(event) {
-      placeholder: String,
+      this.focus = false
-      readonly: Boolean,
+      this.$emit('blur', event)
-      disabled: Boolean,
+      this.fillPlaceHolder = null
-      min: String,
+      if (this.$parent.$options.componentName === 'ElFormItem') {
-      max: String,
+        if (this.validateEvent) {
-      step: String,
+          this.$parent.$emit('el.form.blur', [this.currentValue])
-      minlength: Number,
+        }
-      maxlength: Number,
-      required: {
-        type: Boolean,
-        default: true
-      },
-      autoComplete: {
-        type: String,
-        default: 'off'
-      },
-      validateEvent: {
-        type: Boolean,
-        default: true
       }
     }
   }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/views/components/mixin.vue

@@ -2,9 +2,9 @@
   <div class="components-container">
     <div class='component-item'>
       <el-form :model="demo" :rules="demoRules">
-      <el-form-item prop="title">
+        <el-form-item prop="title">
-        <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
+          <md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
-      </el-form-item>
+        </el-form-item>
       </el-form>
       <code class='code-part'>Material Design 的input</code>
     </div>