|
|
@ -2,22 +2,22 @@ |
|
|
<div class="material-input__component" :class="computedClasses"> |
|
|
<div class="material-input__component" :class="computedClasses"> |
|
|
<div :class="{iconClass:icon}"> |
|
|
<div :class="{iconClass:icon}"> |
|
|
<i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i> |
|
|
<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" :placeholder="fillPlaceHolder" v-model="currentValue" |
|
|
|
|
|
|
|
|
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" |
|
|
|
|
|
|
|
|
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" |
|
|
|
|
|
|
|
|
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength" |
|
|
:step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength" |
|
|
:maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput"> |
|
|
:maxlength="maxlength" :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" |
|
|
|
|
|
|
|
|
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus" |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue" |
|
|
|
|
|
|
|
|
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus" |
|
|
@blur="handleMdBlur" @input="handleModelInput"> |
|
|
@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 === 'text'" type="text" class="material-input" :name="name" :placeholder="placeholder" v-model="currentValue" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength" |
|
|
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength" |
|
|
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput"> |
|
|
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput"> |
|
|
<span class="material-input-bar"></span> |
|
|
<span class="material-input-bar"></span> |
|
|
@ -79,8 +79,7 @@ export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
currentValue: this.value, |
|
|
currentValue: this.value, |
|
|
focus: false, |
|
|
|
|
|
fillPlaceHolder: null |
|
|
|
|
|
|
|
|
focus: false, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
@ -97,14 +96,12 @@ export default { |
|
|
handleMdFocus(event) { |
|
|
handleMdFocus(event) { |
|
|
this.focus = true |
|
|
this.focus = true |
|
|
this.$emit('focus', event) |
|
|
this.$emit('focus', event) |
|
|
if (this.placeholder && this.placeholder !== '') { |
|
|
|
|
|
this.fillPlaceHolder = this.placeholder |
|
|
|
|
|
|
|
|
if (this.placeholder && this.placeholder !== '') { |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
handleMdBlur(event) { |
|
|
handleMdBlur(event) { |
|
|
this.focus = false |
|
|
this.focus = false |
|
|
this.$emit('blur', event) |
|
|
|
|
|
this.fillPlaceHolder = null |
|
|
|
|
|
|
|
|
this.$emit('blur', event) |
|
|
if (this.$parent.$options.componentName === 'ElFormItem') { |
|
|
if (this.$parent.$options.componentName === 'ElFormItem') { |
|
|
if (this.validateEvent) { |
|
|
if (this.validateEvent) { |
|
|
this.$parent.$emit('el.form.blur', [this.currentValue]) |
|
|
this.$parent.$emit('el.form.blur', [this.currentValue]) |
|
|
|