zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refine code

Browse Source
This commit is contained in:
Pan
2017-04-26 14:50:36 +08:00
parent db83dd50d1
commit 168150ff20
8 changed files with 54 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/components/MDinput/index.vue
View File

@@ -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;
}