Blame view

src/components/input/input.vue 8.07 KB
7fa943eb   梁灏   init
1
  <template>
7d5431d8   梁灏   update some style
2
      <div :class="wrapClasses">
0f822c9b   梁灏   add Input component
3
          <template v-if="type !== 'textarea'">
319f5f86   梁灏   fixed #554
4
              <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
ef090131   梁灏   optimize Input va...
5
              <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-if="icon" @click="handleIconClick"></i>
fc7ef072   梁灏   support Input
6
7
8
              <transition name="fade">
                  <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
              </transition>
0f822c9b   梁灏   add Input component
9
              <input
545add71   yinheli   input 支持 focus 方法
10
                  ref="input"
6c145a04   梁灏   fixed #77
11
                  :type="type"
0f822c9b   梁灏   add Input component
12
13
14
15
                  :class="inputClasses"
                  :placeholder="placeholder"
                  :disabled="disabled"
                  :maxlength="maxlength"
0a48ac45   梁灏   Input add readonl...
16
                  :readonly="readonly"
731d69a2   梁灏   fixed #101
17
                  :name="name"
fc7ef072   梁灏   support Input
18
                  :value="currentValue"
c3a9f389   梁灏   update Input
19
                  :number="number"
f15c216a   丁强   Input 组件增加autofoc...
20
                  :autofocus="autofocus"
0a48ac45   梁灏   Input add readonl...
21
                  @keyup.enter="handleEnter"
9e7a3740   xingbofeng   fix: add keyup, k...
22
23
24
                  @keyup="handleKeyup"
                  @keypress="handleKeypress"
                  @keydown="handleKeydown"
0a48ac45   梁灏   Input add readonl...
25
                  @focus="handleFocus"
c46f385a   梁灏   update DatePicker
26
                  @blur="handleBlur"
531cd165   梁灏   support DatePicke...
27
28
                  @input="handleInput"
                  @change="handleChange">
319f5f86   梁灏   fixed #554
29
              <div :class="[prefixCls + '-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
0f822c9b   梁灏   add Input component
30
31
32
          </template>
          <textarea
              v-else
fc7ef072   梁灏   support Input
33
              ref="textarea"
0f822c9b   梁灏   add Input component
34
35
              :class="textareaClasses"
              :style="textareaStyles"
7d5431d8   梁灏   update some style
36
              :placeholder="placeholder"
0f822c9b   梁灏   add Input component
37
38
39
              :disabled="disabled"
              :rows="rows"
              :maxlength="maxlength"
0a48ac45   梁灏   Input add readonl...
40
              :readonly="readonly"
731d69a2   梁灏   fixed #101
41
              :name="name"
a2f27a80   Lawrence Lee   fix #1084
42
              :value="currentValue"
67a87e8d   Aresn   fixed #1017
43
              :autofocus="autofocus"
0a48ac45   梁灏   Input add readonl...
44
              @keyup.enter="handleEnter"
9e7a3740   xingbofeng   fix: add keyup, k...
45
46
47
              @keyup="handleKeyup"
              @keypress="handleKeypress"
              @keydown="handleKeydown"
0a48ac45   梁灏   Input add readonl...
48
              @focus="handleFocus"
c46f385a   梁灏   update DatePicker
49
              @blur="handleBlur"
fc7ef072   梁灏   support Input
50
              @input="handleInput">
0f822c9b   梁灏   add Input component
51
          </textarea>
7d5431d8   梁灏   update some style
52
      </div>
7fa943eb   梁灏   init
53
54
  </template>
  <script>
21dad188   梁灏   prevent dispatch ...
55
      import { oneOf, findComponentUpward } from '../../utils/assist';
0f822c9b   梁灏   add Input component
56
      import calcTextareaHeight from '../../utils/calcTextareaHeight';
cd78c9c4   梁灏   some comps suppor...
57
      import Emitter from '../../mixins/emitter';
7fa943eb   梁灏   init
58
59
60
61
  
      const prefixCls = 'ivu-input';
  
      export default {
06322514   梁灏   support Radio
62
          name: 'Input',
cd78c9c4   梁灏   some comps suppor...
63
          mixins: [ Emitter ],
7fa943eb   梁灏   init
64
65
          props: {
              type: {
0f822c9b   梁灏   add Input component
66
                  validator (value) {
6c145a04   梁灏   fixed #77
67
                      return oneOf(value, ['text', 'textarea', 'password']);
0f822c9b   梁灏   add Input component
68
                  },
7fa943eb   梁灏   init
69
70
71
72
                  default: 'text'
              },
              value: {
                  type: [String, Number],
fc7ef072   梁灏   support Input
73
                  default: ''
7fa943eb   梁灏   init
74
              },
7fa943eb   梁灏   init
75
76
77
78
              size: {
                  validator (value) {
                      return oneOf(value, ['small', 'large']);
                  }
0f822c9b   梁灏   add Input component
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
              },
              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
0a48ac45   梁灏   Input add readonl...
99
100
101
102
              },
              readonly: {
                  type: Boolean,
                  default: false
731d69a2   梁灏   fixed #101
103
104
105
              },
              name: {
                  type: String
c3a9f389   梁灏   update Input
106
107
108
109
              },
              number: {
                  type: Boolean,
                  default: false
f15c216a   丁强   Input 组件增加autofoc...
110
111
              },
              autofocus: {
8d3a02a5   丁强   修改input组件 autofoc...
112
113
                  type: Boolean,
                  default: false
7fa943eb   梁灏   init
114
115
116
117
              }
          },
          data () {
              return {
fc7ef072   梁灏   support Input
118
                  currentValue: this.value,
0f822c9b   梁灏   add Input component
119
120
121
                  prefixCls: prefixCls,
                  prepend: true,
                  append: true,
6ff31952   梁灏   optimize Input sh...
122
                  slotReady: false,
0f822c9b   梁灏   add Input component
123
                  textareaStyles: {}
b0893113   jingsam   :art: add eslint
124
              };
7fa943eb   梁灏   init
125
126
          },
          computed: {
7d5431d8   梁灏   update some style
127
              wrapClasses () {
0f822c9b   梁灏   add Input component
128
129
130
                  return [
                      `${prefixCls}-wrapper`,
                      {
12418c6a   梁灏   fixed #74
131
                          [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
0f822c9b   梁灏   add Input component
132
133
                          [`${prefixCls}-type`]: this.type,
                          [`${prefixCls}-group`]: this.prepend || this.append,
f4e462c0   梁灏   #554
134
                          [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
e2affe49   梁灏   fixed #397
135
136
                          [`${prefixCls}-group-with-prepend`]: this.prepend,
                          [`${prefixCls}-group-with-append`]: this.append,
f4e462c0   梁灏   #554
137
                          [`${prefixCls}-hide-icon`]: this.append  // #554
0f822c9b   梁灏   add Input component
138
                      }
b0893113   jingsam   :art: add eslint
139
                  ];
0f822c9b   梁灏   add Input component
140
141
142
143
144
145
146
147
              },
              inputClasses () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-${this.size}`]: !!this.size,
                          [`${prefixCls}-disabled`]: this.disabled
                      }
b0893113   jingsam   :art: add eslint
148
                  ];
7d5431d8   梁灏   update some style
149
              },
0f822c9b   梁灏   add Input component
150
              textareaClasses () {
7fa943eb   梁灏   init
151
152
153
                  return [
                      `${prefixCls}`,
                      {
0f822c9b   梁灏   add Input component
154
                          [`${prefixCls}-disabled`]: this.disabled
7fa943eb   梁灏   init
155
                      }
b0893113   jingsam   :art: add eslint
156
                  ];
7fa943eb   梁灏   init
157
              }
0f822c9b   梁灏   add Input component
158
159
          },
          methods: {
cd50d0d6   young   fix(input): all a...
160
161
              handleEnter (event) {
                  this.$emit('on-enter', event);
0f822c9b   梁灏   add Input component
162
              },
9e7a3740   xingbofeng   fix: add keyup, k...
163
164
165
166
167
168
169
170
171
              handleKeydown (event) {
                  this.$emit('on-keydown', event);
              },
              handleKeypress(event) {
                  this.$emit('on-keypress', event);
              },
              handleKeyup (event) {
                  this.$emit('on-keyup', event);
              },
cd50d0d6   young   fix(input): all a...
172
173
              handleIconClick (event) {
                  this.$emit('on-click', event);
0f822c9b   梁灏   add Input component
174
              },
cd50d0d6   young   fix(input): all a...
175
176
              handleFocus (event) {
                  this.$emit('on-focus', event);
0a48ac45   梁灏   Input add readonl...
177
              },
cd50d0d6   young   fix(input): all a...
178
              handleBlur (event) {
57737d74   muei   Update input.vue
179
                  this.$emit('on-blur', event);
aa9fc758   梁灏   update Transfer
180
                  if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
21dad188   梁灏   prevent dispatch ...
181
182
                      this.dispatch('FormItem', 'on-form-blur', this.currentValue);
                  }
0a48ac45   梁灏   Input add readonl...
183
              },
fc7ef072   梁灏   support Input
184
              handleInput (event) {
85ed4df8   梁灏   fixed Input bug
185
186
                  let value = event.target.value;
                  if (this.number) value = Number.isNaN(Number(value)) ? value : Number(value);
fc7ef072   梁灏   support Input
187
188
                  this.$emit('input', value);
                  this.setCurrentValue(value);
e1874103   梁灏   update DatePicker
189
                  this.$emit('on-change', event);
c46f385a   梁灏   update DatePicker
190
              },
531cd165   梁灏   support DatePicke...
191
192
193
              handleChange (event) {
                  this.$emit('on-input-change', event);
              },
fc7ef072   梁灏   support Input
194
195
196
197
198
199
              setCurrentValue (value) {
                  if (value === this.currentValue) return;
                  this.$nextTick(() => {
                      this.resizeTextarea();
                  });
                  this.currentValue = value;
aa9fc758   梁灏   update Transfer
200
                  if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {
21dad188   梁灏   prevent dispatch ...
201
202
                      this.dispatch('FormItem', 'on-form-change', value);
                  }
fc7ef072   梁灏   support Input
203
              },
0f822c9b   梁灏   add Input component
204
205
206
207
208
209
210
211
212
              resizeTextarea () {
                  const autosize = this.autosize;
                  if (!autosize || this.type !== 'textarea') {
                      return false;
                  }
  
                  const minRows = autosize.minRows;
                  const maxRows = autosize.maxRows;
  
fc7ef072   梁灏   support Input
213
                  this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
545add71   yinheli   input 支持 focus 方法
214
215
216
217
218
219
220
              },
              focus() {
                  if (this.type === 'textarea') {
                      this.$refs.textarea.focus();
                  } else {
                      this.$refs.input.focus();
                  }
0f822c9b   梁灏   add Input component
221
222
223
              }
          },
          watch: {
fc7ef072   梁灏   support Input
224
225
              value (val) {
                  this.setCurrentValue(val);
0f822c9b   梁灏   add Input component
226
227
              }
          },
fc7ef072   梁灏   support Input
228
229
230
231
232
233
234
235
236
237
          mounted () {
              if (this.type !== 'textarea') {
                  this.prepend = this.$slots.prepend !== undefined;
                  this.append = this.$slots.append !== undefined;
              } else {
                  this.prepend = false;
                  this.append = false;
              }
              this.slotReady = true;
              this.resizeTextarea();
7fa943eb   梁灏   init
238
          }
b0893113   jingsam   :art: add eslint
239
240
      };
  </script>