7fa943eb
 梁灏
init
|
1
|
<template>
|
|
7d5431d8
梁灏
update some style
|
2
|
<div :class="wrapClasses">
|
|
0f822c9b
梁灏
add Input component
|
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
<input
type="text"
:class="inputClasses"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
<div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
</template>
<textarea
v-else
v-el:textarea
:class="textareaClasses"
:style="textareaStyles"
|
|
7d5431d8
梁灏
update some style
|
21
|
:placeholder="placeholder"
|
|
0f822c9b
梁灏
add Input component
|
22
23
24
25
26
27
|
:disabled="disabled"
:rows="rows"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
</textarea>
|
|
7d5431d8
梁灏
update some style
|
28
|
</div>
|
|
7fa943eb
梁灏
init
|
29
30
31
|
</template>
<script>
import { oneOf } from '../../utils/assist';
|
|
0f822c9b
梁灏
add Input component
|
32
|
import calcTextareaHeight from '../../utils/calcTextareaHeight';
|
|
7fa943eb
梁灏
init
|
33
34
35
36
37
38
|
const prefixCls = 'ivu-input';
export default {
props: {
type: {
|
|
0f822c9b
梁灏
add Input component
|
39
40
41
|
validator (value) {
return oneOf(value, ['text', 'textarea']);
},
|
|
7fa943eb
梁灏
init
|
42
43
44
45
46
47
48
|
default: 'text'
},
value: {
type: [String, Number],
default: '',
twoWay: true
},
|
|
7fa943eb
梁灏
init
|
49
50
51
52
|
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
|
|
0f822c9b
梁灏
add Input component
|
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
},
placeholder: {
type: String,
default: ''
},
maxlength: {
type: Number
},
disabled: {
type: Boolean,
default: false
},
icon: String,
autosize: {
type: [Boolean, Object],
default: false
},
rows: {
type: Number,
default: 2
|
|
7fa943eb
梁灏
init
|
73
74
75
76
|
}
},
data () {
return {
|
|
0f822c9b
梁灏
add Input component
|
77
78
79
80
|
prefixCls: prefixCls,
prepend: true,
append: true,
textareaStyles: {}
|
|
7fa943eb
梁灏
init
|
81
82
83
|
}
},
computed: {
|
|
7d5431d8
梁灏
update some style
|
84
|
wrapClasses () {
|
|
0f822c9b
梁灏
add Input component
|
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append,
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
}
]
},
inputClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
}
]
|
|
7d5431d8
梁灏
update some style
|
102
|
},
|
|
0f822c9b
梁灏
add Input component
|
103
|
textareaClasses () {
|
|
7fa943eb
梁灏
init
|
104
105
106
|
return [
`${prefixCls}`,
{
|
|
0f822c9b
梁灏
add Input component
|
107
|
[`${prefixCls}-disabled`]: this.disabled
|
|
7fa943eb
梁灏
init
|
108
109
110
|
}
]
}
|
|
0f822c9b
梁灏
add Input component
|
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
},
methods: {
handleEnter () {
this.$emit('on-enter');
},
handleIconClick () {
this.$emit('on-click');
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {
return false;
}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.resizeTextarea();
});
this.$emit('on-change', val);
}
},
ready () {
if (this.type === 'text') {
this.prepend = this.$els.prepend.innerHTML !== '';
this.append = this.$els.append.innerHTML !== '';
} else {
this.prepend = false;
this.append = false;
}
this.resizeTextarea();
|
|
7fa943eb
梁灏
init
|
148
149
150
|
}
}
</script>
|
