共计 7371 个字符，预计需要花费 19 分钟才能阅读完成。
<template>
<div :class="wrapClasses">
<template v-if="type !=='textarea'">
<div :class="[prefixCls +'-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls +'-icon', prefixCls +'-icon-clear', prefixCls +'-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-'+ icon, prefixCls +'-icon', prefixCls +'-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls +'-icon', prefixCls +'-icon-normal', prefixCls +'-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-'+ suffix]" v-if="suffix"></i></slot></span>
<transition name="fade">
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls +'-icon', prefixCls +'-icon-validate']" v-if="!icon"></i>
</transition>
<input
:id="elementId"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
ref="input"
:type="type"
:class="inputClasses"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxlength"
:readonly="readonly"
:name="name"
:value="currentValue"
:number="number"
:autofocus="autofocus"
@keyup.enter="handleEnter"
@keyup="handleKeyup"
@keypress="handleKeypress"
@keydown="handleKeydown"
@focus="handleFocus"
@blur="handleBlur"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput"
@change="handleChange">
<div :class="[prefixCls +'-group-append']" v-if="append" v-show="slotReady"><slot name="append"></slot></div>
<div :class="[prefixCls +'-group-append', prefixCls +'-search']" v-else-if="search && enterButton" @click="handleSearch">
<i class="ivu-icon ivu-icon-ios-search" v-if="enterButton === true"></i>
<template v-else>{{enterButton}}</template>
</div>
<span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-'+ prefix]" v-if="prefix"></i></slot></span>
</template>
<textarea
v-else
:id="elementId"
:wrap="wrap"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
ref="textarea"
:class="textareaClasses"
:style="textareaStyles"
:placeholder="placeholder"
:disabled="disabled"
:rows="rows"
:maxlength="maxlength"
:readonly="readonly"
:name="name"
:value="currentValue"
:autofocus="autofocus"
@keyup.enter="handleEnter"
@keyup="handleKeyup"
@keypress="handleKeypress"
@keydown="handleKeydown"
@focus="handleFocus"
@blur="handleBlur"
@compositionstart="handleComposition"
@compositionupdate="handleComposition"
@compositionend="handleComposition"
@input="handleInput">
</textarea>
</div>
</template>
<script>
import {oneOf, findComponentUpward} from '../../utils/assist';
import calcTextareaHeight from '../../utils/calcTextareaHeight';
import Emitter from '../../mixins/emitter';
const prefixCls = 'ivu-input';
export default {
name: 'Input',
mixins: [Emitter],
props: {
type: {validator (value) {return oneOf(value, ['text', 'textarea', 'password', 'url', 'email', 'date', 'number', 'tel']);
},
default: 'text'
},
value: {type: [String, Number],
default: ''
},
size: {validator (value) {return oneOf(value, ['small', 'large', 'default']);
},
default () {return !this.$IVIEW || this.$IVIEW.size === ''?'default' : this.$IVIEW.size;}
},
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
},
readonly: {
type: Boolean,
default: false
},
name: {type: String},
number: {
type: Boolean,
default: false
},
autofocus: {
type: Boolean,
default: false
},
spellcheck: {
type: Boolean,
default: false
},
autocomplete: {
type: String,
default: 'off'
},
clearable: {
type: Boolean,
default: false
},
elementId: {type: String},
wrap: {validator (value) {return oneOf(value, ['hard', 'soft']);
},
default: 'soft'
},
prefix: {
type: String,
default: ''
},
suffix: {
type: String,
default: ''
},
search: {
type: Boolean,
default: false
},
enterButton: {type: [Boolean, String],
default: false
}
},
data () {
return {
currentValue: this.value,
prefixCls: prefixCls,
prepend: true,
append: true,
slotReady: false,
textareaStyles: {},
showPrefix: false,
showSuffix: false,
isOnComposition: false
};
},
computed: {wrapClasses () {
return [`${prefixCls}-wrapper`,
{[`${prefixCls}-wrapper-${this.size}`]: !!this.size,
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
[`${prefixCls}-group-with-prepend`]: this.prepend,
[`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
[`${prefixCls}-hide-icon`]: this.append, // #554
[`${prefixCls}-with-search`]: (this.search && this.enterButton)
}
];
},
inputClasses () {
return [`${prefixCls}`,
{[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-with-prefix`]: this.showPrefix,
[`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
}
];
},
textareaClasses () {
return [`${prefixCls}`,
{[`${prefixCls}-disabled`]: this.disabled
}
];
}
},
methods: {handleEnter (event) {this.$emit('on-enter', event);
if (this.search) this.$emit('on-search', this.currentValue);
},
handleKeydown (event) {this.$emit('on-keydown', event);
},
handleKeypress(event) {this.$emit('on-keypress', event);
},
handleKeyup (event) {this.$emit('on-keyup', event);
},
handleIconClick (event) {this.$emit('on-click', event);
},
handleFocus (event) {this.$emit('on-focus', event);
},
handleBlur (event) {this.$emit('on-blur', event);
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {this.dispatch('FormItem', 'on-form-blur', this.currentValue);
}
},
handleComposition(event) {if (event.type === 'compositionstart') {this.isOnComposition = true;}
if (event.type === 'compositionend') {
this.isOnComposition = false;
this.handleInput(event);
}
},
handleInput (event) {if (this.isOnComposition) return;
let value = event.target.value;
if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
this.$emit('input', value);
this.setCurrentValue(value);
this.$emit('on-change', event);
},
handleChange (event) {this.$emit('on-input-change', event);
},
setCurrentValue (value) {if (value === this.currentValue) return;
this.$nextTick(() => {this.resizeTextarea();
});
this.currentValue = value;
if (!findComponentUpward(this, ['DatePicker', 'TimePicker', 'Cascader', 'Search'])) {this.dispatch('FormItem', 'on-form-change', value);
}
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {return false;}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
},
focus () {if (this.type === 'textarea') {this.$refs.textarea.focus();
} else {this.$refs.input.focus();
}
},
blur () {if (this.type === 'textarea') {this.$refs.textarea.blur();
} else {this.$refs.input.blur();
}
},
handleClear () {const e = { target: { value: ''} };
this.$emit('input', '');
this.setCurrentValue('');
this.$emit('on-change', e);
this.$emit('on-clear');
},
handleSearch () {if (this.disabled) return false;
this.$refs.input.focus();
this.$emit('on-search', this.currentValue);
}
},
watch: {value (val) {this.setCurrentValue(val);
}
},
mounted () {if (this.type !== 'textarea') {
this.prepend = this.$slots.prepend !== undefined;
this.append = this.$slots.append !== undefined;
this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
} else {
this.prepend = false;
this.append = false;
}
this.slotReady = true;
this.resizeTextarea();}
};
</script>
正文完
