Skip to content

Commit 9c2a7e9

Browse files
PanJiaChenPanJiaChen
committed
refine : format code
1 parent fde12e8 commit 9c2a7e9

File tree

2 files changed

+90
-109
lines changed

2 files changed

+90
-109
lines changed

‎src/components/MDinput/index.vue‎

Lines changed: 87 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -2,131 +2,112 @@
22
<div class="material-input__component" :class="computedClasses">
33
<div :class="{iconClass:icon}">
44
<i class="el-input__icon material-input__icon" :class="['el-icon-' + icon]" v-if="icon"></i>
5-
<input v-if="type === 'email'" type="email" class="material-input" :name="name"
6-
:placeholder="fillPlaceHolder" v-model="currentValue"
7-
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
8-
@focus="handleMdFocus"
9-
@blur="handleMdBlur" @input="handleModelInput">
10-
<input v-if="type === 'url'" type="url" class="material-input" :name="name"
11-
:placeholder="fillPlaceHolder"
12-
v-model="currentValue"
13-
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
14-
@focus="handleMdFocus"
15-
@blur="handleMdBlur" @input="handleModelInput">
16-
<input v-if="type === 'number'" type="number" class="material-input" :name="name"
17-
:placeholder="fillPlaceHolder" v-model="currentValue" :step="step"
18-
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min"
19-
:minlength="minlength" :maxlength="maxlength"
20-
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
21-
<input v-if="type === 'password'" type="password" class="material-input" :name="name"
22-
:placeholder="fillPlaceHolder"
23-
v-model="currentValue" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max"
24-
:min="min" :required="required"
25-
@focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
26-
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name"
27-
:placeholder="fillPlaceHolder"
28-
v-model="currentValue"
29-
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required"
30-
@focus="handleMdFocus"
31-
@blur="handleMdBlur" @input="handleModelInput">
32-
<input v-if="type === 'text'" type="text" class="material-input" :name="name"
33-
:placeholder="fillPlaceHolder" v-model="currentValue"
34-
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength"
35-
:maxlength="maxlength"
36-
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
37-
5+
<input v-if="type === 'email'" type="email" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
6+
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
7+
@blur="handleMdBlur" @input="handleModelInput">
8+
<input v-if="type === 'url'" type="url" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
9+
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
10+
@blur="handleMdBlur" @input="handleModelInput">
11+
<input v-if="type === 'number'" type="number" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
12+
:step="step" :readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :minlength="minlength"
13+
:maxlength="maxlength" :required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
14+
<input v-if="type === 'password'" type="password" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
15+
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :max="max" :min="min" :required="required" @focus="handleMdFocus"
16+
@blur="handleMdBlur" @input="handleModelInput">
17+
<input v-if="type === 'tel'" type="tel" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
18+
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :required="required" @focus="handleMdFocus"
19+
@blur="handleMdBlur" @input="handleModelInput">
20+
<input v-if="type === 'text'" type="text" class="material-input" :name="name" :placeholder="fillPlaceHolder" v-model="currentValue"
21+
:readonly="readonly" :disabled="disabled" :autoComplete="autoComplete" :minlength="minlength" :maxlength="maxlength"
22+
:required="required" @focus="handleMdFocus" @blur="handleMdBlur" @input="handleModelInput">
3823
<span class="material-input-bar"></span>
39-
4024
<label class="material-label">
4125
<slot></slot>
4226
</label>
43-
4427
</div>
4528
</div>
4629
</template>
4730

4831
<script>
49-
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
32+
// source:https://github.com/wemake-services/vue-material-input/blob/master/src/components/MaterialInput.vue
5033
51-
export default {
52-
53-
name: 'md-input',
54-
computed: {
55-
computedClasses() {
56-
return {
57-
'material--active': this.focus,
58-
'material--disabled': this.disabled,
59-
'material--raised': Boolean(this.focus || this.currentValue) // has value
60-
}
61-
}
34+
export default {
35+
name: 'md-input',
36+
props: {
37+
icon: String,
38+
name: String,
39+
type: {
40+
type: String,
41+
default: 'text'
42+
},
43+
value: [String, Number],
44+
placeholder: String,
45+
readonly: Boolean,
46+
disabled: Boolean,
47+
min: String,
48+
max: String,
49+
step: String,
50+
minlength: Number,
51+
maxlength: Number,
52+
required: {
53+
type: Boolean,
54+
default: true
6255
},
63-
data() {
56+
autoComplete: {
57+
type: String,
58+
default: 'off'
59+
},
60+
validateEvent: {
61+
type: Boolean,
62+
default: true
63+
}
64+
},
65+
computed: {
66+
computedClasses() {
6467
return {
65-
currentValue: this.value,
66-
focus: false,
67-
fillPlaceHolder: null
68+
'material--active': this.focus,
69+
'material--disabled': this.disabled,
70+
'material--raised': Boolean(this.focus || this.currentValue) // has value
6871
}
69-
},
70-
methods: {
71-
handleModelInput(event) {
72-
const value = event.target.value
73-
this.$emit('input', value)
74-
if (this.$parent.$options.componentName === 'ElFormItem') {
75-
if (this.validateEvent) {
76-
this.$parent.$emit('el.form.change', [value])
77-
}
78-
}
79-
this.$emit('change', value)
80-
// this.handleValidation()
81-
},
82-
handleMdFocus(event) {
83-
this.focus = true
84-
this.$emit('focus', event)
85-
if (this.placeholder && this.placeholder !== '') {
86-
this.fillPlaceHolder = this.placeholder
87-
}
88-
},
89-
handleMdBlur(event) {
90-
this.focus = false
91-
this.$emit('blur', event)
92-
this.fillPlaceHolder = null
93-
if (this.$parent.$options.componentName === 'ElFormItem') {
94-
if (this.validateEvent) {
95-
this.$parent.$emit('el.form.blur', [this.currentValue])
96-
}
72+
}
73+
},
74+
data() {
75+
return {
76+
currentValue: this.value,
77+
focus: false,
78+
fillPlaceHolder: null
79+
}
80+
},
81+
methods: {
82+
handleModelInput(event) {
83+
const value = event.target.value
84+
this.$emit('input', value)
85+
if (this.$parent.$options.componentName === 'ElFormItem') {
86+
if (this.validateEvent) {
87+
this.$parent.$emit('el.form.change', [value])
9788
}
9889
}
90+
this.$emit('change', value)
91+
},
92+
handleMdFocus(event) {
93+
this.focus = true
94+
this.$emit('focus', event)
95+
if (this.placeholder && this.placeholder !== '') {
96+
this.fillPlaceHolder = this.placeholder
97+
}
9998
},
100-
props: {
101-
icon: String,
102-
name: String,
103-
type: {
104-
type: String,
105-
default: 'text'
106-
},
107-
value: [String, Number],
108-
placeholder: String,
109-
readonly: Boolean,
110-
disabled: Boolean,
111-
min: String,
112-
max: String,
113-
step: String,
114-
minlength: Number,
115-
maxlength: Number,
116-
required: {
117-
type: Boolean,
118-
default: true
119-
},
120-
autoComplete: {
121-
type: String,
122-
default: 'off'
123-
},
124-
validateEvent: {
125-
type: Boolean,
126-
default: true
99+
handleMdBlur(event) {
100+
this.focus = false
101+
this.$emit('blur', event)
102+
this.fillPlaceHolder = null
103+
if (this.$parent.$options.componentName === 'ElFormItem') {
104+
if (this.validateEvent) {
105+
this.$parent.$emit('el.form.blur', [this.currentValue])
106+
}
127107
}
128108
}
129109
}
110+
}
130111
</script>
131112

132113
<style rel="stylesheet/scss" lang="scss" scoped>

‎src/views/components/mixin.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<div class="components-container">
33
<div class='component-item'>
44
<el-form :model="demo" :rules="demoRules">
5-
<el-form-item prop="title">
6-
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
7-
</el-form-item>
5+
<el-form-item prop="title">
6+
<md-input icon="search" name="title" placeholder="输入标题" v-model="demo.title">标题</md-input>
7+
</el-form-item>
88
</el-form>
99
<code class='code-part'>Material Design 的input</code>
1010
</div>

0 commit comments

Comments
 (0)