11<template >
22 <div
33 :class =" {
4- 'vue-input': this.type !== 'textarea',
5- 'vue-textarea': this.type === 'textarea',
6- 'vue-input--prefix': this.$slots.prefix,
7- 'vue-input--suffix': this.$slots.suffix,
8- 'vue-input--prepend': this.$slots.prepend,
9- 'vue-input--append': this.$slots.append,
10- }" >
4+ 'vue-input': type !== 'textarea',
5+ 'vue-textarea': type === 'textarea',
6+ 'vue-input--prefix': $slots.prefix,
7+ 'vue-input--suffix': $slots.suffix,
8+ 'vue-input--prepend': $slots.prepend,
9+ 'vue-input--append': $slots.append,
10+ }"
11+ >
1112 <div
12- v-if =" this.$slots.prefix && type !== 'textarea'"
13- class =" vue-input__prefix" >
14- <slot name =" prefix" ></slot >
13+ v-if =" $slots.prefix && type !== 'textarea'"
14+ class =" vue-input__prefix"
15+ >
16+ <slot name =" prefix" />
1517 </div >
1618 <div
17- v-if =" this.$slots.suffix && type !== 'textarea'"
18- class =" vue-input__suffix" >
19- <slot name =" suffix" ></slot >
19+ v-if =" $slots.suffix && type !== 'textarea'"
20+ class =" vue-input__suffix"
21+ >
22+ <slot name =" suffix" />
2023 </div >
2124 <div
22- v-if =" this.$slots.prepend && type !== 'textarea'"
23- class =" vue-input__prepend" >
24- <slot name =" prepend" ></slot >
25+ v-if =" $slots.prepend && type !== 'textarea'"
26+ class =" vue-input__prepend"
27+ >
28+ <slot name =" prepend" />
2529 </div >
2630 <input
2731 v-if =" type !== 'textarea'"
28- class =" vue-input__inner"
2932 :name =" name"
3033 :type =" type"
3134 :value =" value"
3538 :max =" max"
3639 :min =" min"
3740 :autocomplete =" [ autocomplete ? 'off' : 'on' ]"
41+ class =" vue-input__inner"
3842 @input =" onInput"
3943 >
4044 <textarea
4145 v-else
42- class =" vue-textarea__inner"
4346 :name =" name"
4447 :type =" type"
4548 :placeholder =" placeholder"
4649 :disabled =" disabled"
4750 :readonly =" readonly"
4851 :value =" value"
49- :rows =" rows" >
50- </textarea >
52+ :rows =" rows"
53+ class =" vue-textarea__inner"
54+ />
5155 <div
5256 v-if =" this.$slots.append && type !== 'textarea'"
53- class =" vue-input__append" >
54- <slot name =" append" ></slot >
57+ class =" vue-input__append"
58+ >
59+ <slot name =" append" />
5560 </div >
5661 </div >
5762</template >
6065export default {
6166 name: ' VueInput' ,
6267
68+ model: {
69+ prop: ' value' ,
70+ event : ' input'
71+ },
72+
6373 props: {
6474 type: {
6575 type: String ,
6676 default: ' text'
6777 },
68- value: [String , Number ],
69- name: String ,
78+ value: {
79+ type: [String , Number ],
80+ default: ' '
81+ },
82+ name: {
83+ type: String ,
84+ default: ' '
85+ },
7086 readonly: {
7187 type: Boolean ,
7288 default: false
@@ -75,9 +91,18 @@ export default {
7591 type: Boolean ,
7692 default: false
7793 },
78- min: Number ,
79- max: Number ,
80- placeholder: String ,
94+ min: {
95+ type: Number ,
96+ default: null
97+ },
98+ max: {
99+ type: Number ,
100+ default: null
101+ },
102+ placeholder: {
103+ type: String ,
104+ default: ' '
105+ },
81106 disabled: {
82107 type: Boolean ,
83108 default: false
@@ -88,11 +113,6 @@ export default {
88113 }
89114 },
90115
91- model: {
92- prop: ' value' ,
93- event : ' input'
94- },
95-
96116 methods: {
97117 onInput (e ) {
98118 this .$emit (' input' , e .target .value )
0 commit comments