cy-element-ui 1.1.25 → 1.1.26

package/packages/input/src/input.vue

@@ -1,440 +1,440 @@
-<template>
-	<div :class="[
-			type === 'textarea' ? 'el-textarea' : 'el-input',
-			inputSize ? 'el-input--' + inputSize : '',
-			{
-				'is-disabled': inputDisabled,
-				'is-exceed': inputExceed,
-				'el-input-group': $slots.prepend || $slots.append,
-				'el-input-group--append': $slots.append,
-				'el-input-group--prepend': $slots.prepend,
-				'el-input--prefix': $slots.prefix || prefixIcon,
-				'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
-			}
-		]"
-		@mouseenter="hovering = true"
-		@mouseleave="hovering = false"
-	>
-		<template v-if="type !== 'textarea'">
-			<!-- 前置元素 -->
-			<div class="el-input-group__prepend" v-if="$slots.prepend">
-				<slot name="prepend"></slot>
-			</div>
-			<input
-				:tabindex="tabindex"
-				v-if="type !== 'textarea'"
-				class="el-input__inner"
-				v-bind="$attrs"
-				:type="showPassword ? (passwordVisible ? 'text': 'password') : type"
-				:disabled="inputDisabled"
-				:readonly="readonly"
-				:autocomplete="autoComplete || autocomplete"
-				ref="input"
-				@compositionstart="handleCompositionStart"
-				@compositionupdate="handleCompositionUpdate"
-				@compositionend="handleCompositionEnd"
-				@input="handleInput"
-				@focus="handleFocus"
-				@blur="handleBlur"
-				@change="handleChange"
-				:aria-label="label"
-			>
-			<!-- 前置内容 -->
-			<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
-				<slot name="prefix"></slot>
-				<i class="el-input__icon"
-					v-if="prefixIcon"
-					:class="prefixIcon">
-				</i>
-			</span>
-			<!-- 后置内容 -->
-			<span
-				class="el-input__suffix"
-				v-if="getSuffixVisible()">
-				<span class="el-input__suffix-inner">
-					<template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
-						<slot name="suffix"></slot>
-						<i class="el-input__icon"
-							v-if="suffixIcon"
-							:class="suffixIcon">
-						</i>
-					</template>
-					<i v-if="showClear"
-						class="el-input__icon el-icon-circle-close el-input__clear"
-						@mousedown.prevent
-						@click="clear"
-					></i>
-					<i v-if="showPwdVisible"
-						class="el-input__icon el-icon-view el-input__clear"
-						@click="handlePasswordVisible"
-					></i>
-					<span v-if="isWordLimitVisible" class="el-input__count">
-						<span class="el-input__count-inner">
-							{{ textLength }}/{{ upperLimit }}
-						</span>
-					</span>
-				</span>
-				<i class="el-input__icon"
-					v-if="validateState"
-					:class="['el-input__validateIcon', validateIcon]">
-				</i>
-			</span>
-			<!-- 后置元素 -->
-			<div class="el-input-group__append" v-if="$slots.append">
-				<slot name="append"></slot>
-			</div>
-		</template>
-		<textarea
-			v-else
-			:tabindex="tabindex"
-			class="el-textarea__inner"
-			@compositionstart="handleCompositionStart"
-			@compositionupdate="handleCompositionUpdate"
-			@compositionend="handleCompositionEnd"
-			@input="handleInput"
-			ref="textarea"
-			v-bind="$attrs"
-			:disabled="inputDisabled"
-			:readonly="readonly"
-			:autocomplete="autoComplete || autocomplete"
-			:style="textareaStyle"
-			@focus="handleFocus"
-			@blur="handleBlur"
-			@change="handleChange"
-			:aria-label="label"
-		>
-    </textarea>
-		<span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
-	</div>
-</template>
-<script>
-import emitter from 'element-ui/src/mixins/emitter';
-import Migrating from 'element-ui/src/mixins/migrating';
-import calcTextareaHeight from './calcTextareaHeight';
-import merge from 'element-ui/src/utils/merge';
-import { isKorean } from 'element-ui/src/utils/shared';
-
-export default {
-	name: 'ElInput',
-
-	componentName: 'ElInput',
-
-	mixins: [emitter, Migrating],
-
-	inheritAttrs: false,
-
-	inject: {
-		elForm: {
-			default: ''
-		},
-		elFormItem: {
-			default: ''
-		}
-	},
-
-	data() {
-		return {
-			textareaCalcStyle: {},
-			hovering: false,
-			focused: false,
-			isComposing: false,
-			passwordVisible: false
-		};
-	},
-
-	props: {
-		value: [String, Number],
-		size: String,
-		resize: String,
-		form: String,
-		disabled: Boolean,
-		readonly: Boolean,
-		type: {
-			type: String,
-			default: 'text'
-		},
-		autosize: {
-			type: [Boolean, Object],
-			default: false
-		},
-		autocomplete: {
-			type: String,
-			default: 'off'
-		},
-		/** @Deprecated in next major version */
-		autoComplete: {
-			type: String,
-			validator(val) {
-				process.env.NODE_ENV !== 'production' &&
-					console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
-				return true;
-			}
-		},
-		validateEvent: {
-			type: Boolean,
-			default: true
-		},
-		suffixIcon: String,
-		prefixIcon: String,
-		label: String,
-		clearable: {
-			type: Boolean,
-			default: false
-		},
-		showPassword: {
-			type: Boolean,
-			default: false
-		},
-		showWordLimit: {
-			type: Boolean,
-			default: false
-		},
-		tabindex: String
-	},
-
-	computed: {
-		_elFormItemSize() {
-			return (this.elFormItem || {}).elFormItemSize;
-		},
-		validateState() {
-			return this.elFormItem ? this.elFormItem.validateState : '';
-		},
-		needStatusIcon() {
-			return this.elForm ? this.elForm.statusIcon : false;
-		},
-		validateIcon() {
-			return {
-				validating: 'el-icon-loading',
-				success: 'el-icon-circle-check',
-				error: 'el-icon-circle-close'
-			}[this.validateState];
-		},
-		textareaStyle() {
-			return merge({}, this.textareaCalcStyle, { resize: this.resize });
-		},
-		inputSize() {
-			return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-		},
-		inputDisabled() {
-			return this.disabled || (this.elForm || {}).disabled;
-		},
-		nativeInputValue() {
-			return this.value === null || this.value === undefined ? '' : String(this.value);
-		},
-		showClear() {
-			return this.clearable &&
-				!this.inputDisabled &&
-				!this.readonly &&
-				this.nativeInputValue &&
-				(this.focused || this.hovering);
-		},
-		showPwdVisible() {
-			return this.showPassword &&
-				!this.inputDisabled &&
-				!this.readonly &&
-				(!!this.nativeInputValue || this.focused);
-		},
-		isWordLimitVisible() {
-			return this.showWordLimit &&
-				this.$attrs.maxlength &&
-				(this.type === 'text' || this.type === 'textarea') &&
-				!this.inputDisabled &&
-				!this.readonly &&
-				!this.showPassword;
-		},
-		upperLimit() {
-			return this.$attrs.maxlength;
-		},
-		textLength() {
-			if (typeof this.value === 'number') {
-				return String(this.value).length;
-			}
-
-			return (this.value || '').length;
-		},
-		inputExceed() {
-			// show exceed style if length of initial value greater then maxlength
-			return this.isWordLimitVisible &&
-				(this.textLength > this.upperLimit);
-		}
-	},
-
-	watch: {
-		value(val) {
-			this.$nextTick(this.resizeTextarea);
-			if (this.validateEvent) {
-				this.dispatch('ElFormItem', 'el.form.change', [val]);
-			}
-		},
-		// native input value is set explicitly
-		// do not use v-model / :value in template
-		// see: https://github.com/ElemeFE/element/issues/14521
-		nativeInputValue() {
-			this.setNativeInputValue();
-		},
-		// when change between <input> and <textarea>,
-		// update DOM dependent value and styles
-		// https://github.com/ElemeFE/element/issues/14857
-		type() {
-			this.$nextTick(() => {
-				this.setNativeInputValue();
-				this.resizeTextarea();
-				this.updateIconOffset();
-			});
-		}
-	},
-
-	methods: {
-		focus() {
-			this.getInput().focus();
-		},
-		blur() {
-			this.getInput().blur();
-		},
-		getMigratingConfig() {
-			return {
-				props: {
-					'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
-					'on-icon-click': 'on-icon-click is removed.'
-				},
-				events: {
-					'click': 'click is removed.'
-				}
-			};
-		},
-		handleBlur(event) {
-			this.focused = false;
-			this.$emit('blur', event);
-			if (this.validateEvent) {
-				this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
-			}
-		},
-		select() {
-			this.getInput().select();
-		},
-		resizeTextarea() {
-			if (this.$isServer) return;
-			const { autosize, type } = this;
-			if (type !== 'textarea') return;
-			if (!autosize) {
-				this.textareaCalcStyle = {
-					minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
-				};
-				return;
-			}
-			const minRows = autosize.minRows;
-			const maxRows = autosize.maxRows;
-
-			this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
-		},
-		setNativeInputValue() {
-			const input = this.getInput();
-			if (!input) return;
-			if (input.value === this.nativeInputValue) return;
-			input.value = this.nativeInputValue;
-		},
-		handleFocus(event) {
-			this.focused = true;
-			this.$emit('focus', event);
-		},
-		handleCompositionStart(event) {
-			this.$emit('compositionstart', event);
-			this.isComposing = true;
-		},
-		handleCompositionUpdate(event) {
-			this.$emit('compositionupdate', event);
-			const text = event.target.value;
-			const lastCharacter = text[text.length - 1] || '';
-			this.isComposing = !isKorean(lastCharacter);
-		},
-		handleCompositionEnd(event) {
-			this.$emit('compositionend', event);
-			if (this.isComposing) {
-				this.isComposing = false;
-				this.handleInput(event);
-			}
-		},
-		handleInput(event) {
-			// should not emit input during composition
-			// see: https://github.com/ElemeFE/element/issues/10516
-			if (this.isComposing) return;
-
-			// hack for https://github.com/ElemeFE/element/issues/8548
-			// should remove the following line when we don't support IE
-			if (event.target.value === this.nativeInputValue) return;
-
-			this.$emit('input', event.target.value);
-
-			// ensure native input value is controlled
-			// see: https://github.com/ElemeFE/element/issues/12850
-			this.$nextTick(this.setNativeInputValue);
-		},
-		handleChange(event) {
-			this.$emit('change', event.target.value);
-		},
-		calcIconOffset(place) {
-			let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${ place }`) || []);
-			if (!elList.length) return;
-			let el = null;
-			for (let i = 0; i < elList.length; i++) {
-				if (elList[i].parentNode === this.$el) {
-					el = elList[i];
-					break;
-				}
-			}
-			if (!el) return;
-			const pendantMap = {
-				suffix: 'append',
-				prefix: 'prepend'
-			};
-
-			const pendant = pendantMap[place];
-			if (this.$slots[pendant]) {
-				el.style.transform = `translateX(${ place === 'suffix' ? '-' : '' }${ this.$el.querySelector(`.el-input-group__${ pendant }`).offsetWidth }px)`;
-			} else {
-				el.removeAttribute('style');
-			}
-		},
-		updateIconOffset() {
-			this.calcIconOffset('prefix');
-			this.calcIconOffset('suffix');
-		},
-		clear() {
-			this.$emit('input', '');
-			this.$emit('change', '');
-			this.$emit('clear');
-		},
-		handlePasswordVisible() {
-			this.passwordVisible = !this.passwordVisible;
-			this.$nextTick(() => {
-				this.focus();
-			});
-		},
-		getInput() {
-			return this.$refs.input || this.$refs.textarea;
-		},
-		getSuffixVisible() {
-			return this.$slots.suffix ||
-				this.suffixIcon ||
-				this.showClear ||
-				this.showPassword ||
-				this.isWordLimitVisible ||
-				(this.validateState && this.needStatusIcon);
-		}
-	},
-
-	created() {
-		this.$on('inputSelect', this.select);
-	},
-
-	mounted() {
-		this.setNativeInputValue();
-		this.resizeTextarea();
-		this.updateIconOffset();
-	},
-
-	updated() {
-		this.$nextTick(this.updateIconOffset);
-	}
-};
-</script>
+<template>
+	<div :class="[
+			type === 'textarea' ? 'el-textarea' : 'el-input',
+			inputSize ? 'el-input--' + inputSize : '',
+			{
+				'is-disabled': inputDisabled,
+				'is-exceed': inputExceed,
+				'el-input-group': $slots.prepend || $slots.append,
+				'el-input-group--append': $slots.append,
+				'el-input-group--prepend': $slots.prepend,
+				'el-input--prefix': $slots.prefix || prefixIcon,
+				'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
+			}
+		]"
+		@mouseenter="hovering = true"
+		@mouseleave="hovering = false"
+	>
+		<template v-if="type !== 'textarea'">
+			<!-- 前置元素 -->
+			<div class="el-input-group__prepend" v-if="$slots.prepend">
+				<slot name="prepend"></slot>
+			</div>
+			<input
+				:tabindex="tabindex"
+				v-if="type !== 'textarea'"
+				class="el-input__inner"
+				v-bind="$attrs"
+				:type="showPassword ? (passwordVisible ? 'text': 'password') : type"
+				:disabled="inputDisabled"
+				:readonly="readonly"
+				:autocomplete="autoComplete || autocomplete"
+				ref="input"
+				@compositionstart="handleCompositionStart"
+				@compositionupdate="handleCompositionUpdate"
+				@compositionend="handleCompositionEnd"
+				@input="handleInput"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				@change="handleChange"
+				:aria-label="label"
+			>
+			<!-- 前置内容 -->
+			<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+				<slot name="prefix"></slot>
+				<i class="el-input__icon"
+					v-if="prefixIcon"
+					:class="prefixIcon">
+				</i>
+			</span>
+			<!-- 后置内容 -->
+			<span
+				class="el-input__suffix"
+				v-if="getSuffixVisible()">
+				<span class="el-input__suffix-inner">
+					<template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
+						<slot name="suffix"></slot>
+						<i class="el-input__icon"
+							v-if="suffixIcon"
+							:class="suffixIcon">
+						</i>
+					</template>
+					<i v-if="showClear"
+						class="el-input__icon el-icon-circle-close el-input__clear"
+						@mousedown.prevent
+						@click="clear"
+					></i>
+					<i v-if="showPwdVisible"
+						class="el-input__icon el-icon-view el-input__clear"
+						@click="handlePasswordVisible"
+					></i>
+					<span v-if="isWordLimitVisible" class="el-input__count">
+						<span class="el-input__count-inner">
+							{{ textLength }}/{{ upperLimit }}
+						</span>
+					</span>
+				</span>
+				<i class="el-input__icon"
+					v-if="validateState"
+					:class="['el-input__validateIcon', validateIcon]">
+				</i>
+			</span>
+			<!-- 后置元素 -->
+			<div class="el-input-group__append" v-if="$slots.append">
+				<slot name="append"></slot>
+			</div>
+		</template>
+		<textarea
+			v-else
+			:tabindex="tabindex"
+			class="el-textarea__inner"
+			@compositionstart="handleCompositionStart"
+			@compositionupdate="handleCompositionUpdate"
+			@compositionend="handleCompositionEnd"
+			@input="handleInput"
+			ref="textarea"
+			v-bind="$attrs"
+			:disabled="inputDisabled"
+			:readonly="readonly"
+			:autocomplete="autoComplete || autocomplete"
+			:style="textareaStyle"
+			@focus="handleFocus"
+			@blur="handleBlur"
+			@change="handleChange"
+			:aria-label="label"
+		>
+    </textarea>
+		<span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
+	</div>
+</template>
+<script>
+import emitter from 'element-ui/src/mixins/emitter';
+import Migrating from 'element-ui/src/mixins/migrating';
+import calcTextareaHeight from './calcTextareaHeight';
+import merge from 'element-ui/src/utils/merge';
+import { isKorean } from 'element-ui/src/utils/shared';
+
+export default {
+	name: 'ElInput',
+
+	componentName: 'ElInput',
+
+	mixins: [emitter, Migrating],
+
+	inheritAttrs: false,
+
+	inject: {
+		elForm: {
+			default: ''
+		},
+		elFormItem: {
+			default: ''
+		}
+	},
+
+	data() {
+		return {
+			textareaCalcStyle: {},
+			hovering: false,
+			focused: false,
+			isComposing: false,
+			passwordVisible: false
+		};
+	},
+
+	props: {
+		value: [String, Number],
+		size: String,
+		resize: String,
+		form: String,
+		disabled: Boolean,
+		readonly: Boolean,
+		type: {
+			type: String,
+			default: 'text'
+		},
+		autosize: {
+			type: [Boolean, Object],
+			default: false
+		},
+		autocomplete: {
+			type: String,
+			default: 'off'
+		},
+		/** @Deprecated in next major version */
+		autoComplete: {
+			type: String,
+			validator(val) {
+				process.env.NODE_ENV !== 'production' &&
+					console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
+				return true;
+			}
+		},
+		validateEvent: {
+			type: Boolean,
+			default: true
+		},
+		suffixIcon: String,
+		prefixIcon: String,
+		label: String,
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+		showPassword: {
+			type: Boolean,
+			default: false
+		},
+		showWordLimit: {
+			type: Boolean,
+			default: false
+		},
+		tabindex: String
+	},
+
+	computed: {
+		_elFormItemSize() {
+			return (this.elFormItem || {}).elFormItemSize;
+		},
+		validateState() {
+			return this.elFormItem ? this.elFormItem.validateState : '';
+		},
+		needStatusIcon() {
+			return this.elForm ? this.elForm.statusIcon : false;
+		},
+		validateIcon() {
+			return {
+				validating: 'el-icon-loading',
+				success: 'el-icon-circle-check',
+				error: 'el-icon-circle-close'
+			}[this.validateState];
+		},
+		textareaStyle() {
+			return merge({}, this.textareaCalcStyle, { resize: this.resize });
+		},
+		inputSize() {
+			return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+		},
+		inputDisabled() {
+			return this.disabled || (this.elForm || {}).disabled;
+		},
+		nativeInputValue() {
+			return this.value === null || this.value === undefined ? '' : String(this.value);
+		},
+		showClear() {
+			return this.clearable &&
+				!this.inputDisabled &&
+				!this.readonly &&
+				this.nativeInputValue &&
+				(this.focused || this.hovering);
+		},
+		showPwdVisible() {
+			return this.showPassword &&
+				!this.inputDisabled &&
+				!this.readonly &&
+				(!!this.nativeInputValue || this.focused);
+		},
+		isWordLimitVisible() {
+			return this.showWordLimit &&
+				this.$attrs.maxlength &&
+				(this.type === 'text' || this.type === 'textarea') &&
+				!this.inputDisabled &&
+				!this.readonly &&
+				!this.showPassword;
+		},
+		upperLimit() {
+			return this.$attrs.maxlength;
+		},
+		textLength() {
+			if (typeof this.value === 'number') {
+				return String(this.value).length;
+			}
+
+			return (this.value || '').length;
+		},
+		inputExceed() {
+			// show exceed style if length of initial value greater then maxlength
+			return this.isWordLimitVisible &&
+				(this.textLength > this.upperLimit);
+		}
+	},
+
+	watch: {
+		value(val) {
+			this.$nextTick(this.resizeTextarea);
+			if (this.validateEvent) {
+				this.dispatch('ElFormItem', 'el.form.change', [val]);
+			}
+		},
+		// native input value is set explicitly
+		// do not use v-model / :value in template
+		// see: https://github.com/ElemeFE/element/issues/14521
+		nativeInputValue() {
+			this.setNativeInputValue();
+		},
+		// when change between <input> and <textarea>,
+		// update DOM dependent value and styles
+		// https://github.com/ElemeFE/element/issues/14857
+		type() {
+			this.$nextTick(() => {
+				this.setNativeInputValue();
+				this.resizeTextarea();
+				this.updateIconOffset();
+			});
+		}
+	},
+
+	methods: {
+		focus() {
+			this.getInput().focus();
+		},
+		blur() {
+			this.getInput().blur();
+		},
+		getMigratingConfig() {
+			return {
+				props: {
+					'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
+					'on-icon-click': 'on-icon-click is removed.'
+				},
+				events: {
+					'click': 'click is removed.'
+				}
+			};
+		},
+		handleBlur(event) {
+			this.focused = false;
+			this.$emit('blur', event);
+			if (this.validateEvent) {
+				this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
+			}
+		},
+		select() {
+			this.getInput().select();
+		},
+		resizeTextarea() {
+			if (this.$isServer) return;
+			const { autosize, type } = this;
+			if (type !== 'textarea') return;
+			if (!autosize) {
+				this.textareaCalcStyle = {
+					minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
+				};
+				return;
+			}
+			const minRows = autosize.minRows;
+			const maxRows = autosize.maxRows;
+
+			this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
+		},
+		setNativeInputValue() {
+			const input = this.getInput();
+			if (!input) return;
+			if (input.value === this.nativeInputValue) return;
+			input.value = this.nativeInputValue;
+		},
+		handleFocus(event) {
+			this.focused = true;
+			this.$emit('focus', event);
+		},
+		handleCompositionStart(event) {
+			this.$emit('compositionstart', event);
+			this.isComposing = true;
+		},
+		handleCompositionUpdate(event) {
+			this.$emit('compositionupdate', event);
+			const text = event.target.value;
+			const lastCharacter = text[text.length - 1] || '';
+			this.isComposing = !isKorean(lastCharacter);
+		},
+		handleCompositionEnd(event) {
+			this.$emit('compositionend', event);
+			if (this.isComposing) {
+				this.isComposing = false;
+				this.handleInput(event);
+			}
+		},
+		handleInput(event) {
+			// should not emit input during composition
+			// see: https://github.com/ElemeFE/element/issues/10516
+			if (this.isComposing) return;
+
+			// hack for https://github.com/ElemeFE/element/issues/8548
+			// should remove the following line when we don't support IE
+			if (event.target.value === this.nativeInputValue) return;
+
+			this.$emit('input', event.target.value);
+
+			// ensure native input value is controlled
+			// see: https://github.com/ElemeFE/element/issues/12850
+			this.$nextTick(this.setNativeInputValue);
+		},
+		handleChange(event) {
+			this.$emit('change', event.target.value);
+		},
+		calcIconOffset(place) {
+			let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${ place }`) || []);
+			if (!elList.length) return;
+			let el = null;
+			for (let i = 0; i < elList.length; i++) {
+				if (elList[i].parentNode === this.$el) {
+					el = elList[i];
+					break;
+				}
+			}
+			if (!el) return;
+			const pendantMap = {
+				suffix: 'append',
+				prefix: 'prepend'
+			};
+
+			const pendant = pendantMap[place];
+			if (this.$slots[pendant]) {
+				el.style.transform = `translateX(${ place === 'suffix' ? '-' : '' }${ this.$el.querySelector(`.el-input-group__${ pendant }`).offsetWidth }px)`;
+			} else {
+				el.removeAttribute('style');
+			}
+		},
+		updateIconOffset() {
+			this.calcIconOffset('prefix');
+			this.calcIconOffset('suffix');
+		},
+		clear() {
+			this.$emit('input', '');
+			this.$emit('change', '');
+			this.$emit('clear');
+		},
+		handlePasswordVisible() {
+			this.passwordVisible = !this.passwordVisible;
+			this.$nextTick(() => {
+				this.focus();
+			});
+		},
+		getInput() {
+			return this.$refs.input || this.$refs.textarea;
+		},
+		getSuffixVisible() {
+			return this.$slots.suffix ||
+				this.suffixIcon ||
+				this.showClear ||
+				this.showPassword ||
+				this.isWordLimitVisible ||
+				(this.validateState && this.needStatusIcon);
+		}
+	},
+
+	created() {
+		this.$on('inputSelect', this.select);
+	},
+
+	mounted() {
+		this.setNativeInputValue();
+		this.resizeTextarea();
+		this.updateIconOffset();
+	},
+
+	updated() {
+		this.$nextTick(this.updateIconOffset);
+	}
+};
+</script>