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
|
return [
`${prefixCls}-wrapper`,
{
|
|
12418c6a
梁灏
fixed #74
|
88
|
[`${prefixCls}-wrapper-${this.size}`]: !!this.size,
|
|
0f822c9b
梁灏
add Input component
|
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
[`${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
|
103
|
},
|
|
0f822c9b
梁灏
add Input component
|
104
|
textareaClasses () {
|
|
7fa943eb
梁灏
init
|
105
106
107
|
return [
`${prefixCls}`,
{
|
|
0f822c9b
梁灏
add Input component
|
108
|
[`${prefixCls}-disabled`]: this.disabled
|
|
7fa943eb
梁灏
init
|
109
110
111
|
}
]
}
|
|
0f822c9b
梁灏
add Input component
|
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
148
|
},
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
|
149
150
151
|
}
}
</script>
|
