ai.touchui-vue 1.30.2 → 1.30.3

package/packages/input/src/input.vue

@@ -1,653 +1,653 @@
-<template>
-	<span :id="id" v-tip="changed ? t('to.common.originalValue', valueStore[0]) : ''" class="to-input" :class="setClass" :style="setStyle" @click.stop="$emit('click')">
-		<span v-if="verifiable && (rule || required || ToFormItem.required)" v-show="false" :trim="trim" :req="validateRequired" class="to-validate" :desc="validateDesc" :rule="rule" :value="data"></span>
-		<span v-if="prefix || $slots.prefix || step" class="to-inputPrefix">
-			<slot name="prefix"></slot>
-			<span v-if="prefix" class="to-inputText">{{ prefix }}</span>
-			<to-icon v-if="step" v-dis="Number(data) === Number(min) || readonly" :value="stepIconMode ? 'unfold' : 'reduce'" link color="primary" mode="none" @mousedown.native="reduce"></to-icon>
-		</span>
-		<textarea
-			v-if="type === 'textarea'"
-			ref="input"
-			v-model="data"
-			:autocomplete="autocomplete ? 'on' : 'new-password'"
-			:maxlength="maxlength"
-			:placeholder="iPlaceholder"
-			:readonly="disabled"
-			:tabindex="tabindex"
-			@keyup="inputKeyup"
-			@keydown="inputKeydown"
-			@cut="inputCut"
-			@focus="inputFocus"
-			@blur="inputBlur"
-			@paste="inputPaste"
-			@keypress="inputKeyPress"
-			>
-		</textarea>
-		<span v-else-if="type === 'html'" class="to-inputHTML">
-			{{ html }}
-			<slot name="html"></slot>
-		</span>
-		<input
-			v-else
-			ref="input"
-			v-model="data"
-			:autocomplete="autocomplete ? 'on' : 'new-password'"
-			:tabindex="tabindex"
-			:maxlength="maxlength"
-			:placeholder="iPlaceholder"
-			:type="itype"
-			:readonly="disabled"
-			@keyup="inputKeyup"
-			@keydown="inputKeydown"
-			@cut="inputCut"
-			@focus="inputFocus"
-			@blur="inputBlur"
-			@paste="inputPaste"
-			@keypress="inputKeyPress"
-			@change="inputChange"
-			/>
-		<span v-if="clearable || suggestion || $slots.default || $slots.suffix || suffix || step" class="to-inputSuffix">
-			<to-icon v-if="clearable" v-show="clearVisible" class="to-inputClear" color="default" :mode="iconMode" link value="close" @click.stop="clear()"></to-icon>
-			<to-icon v-if="step" v-dis="Number(data) === Number(max) || readonly" :value="stepIconMode ? 'fold' : 'add'" link color="primary" mode="none" @mousedown.native="increase"></to-icon>
-			<span v-if="suffix" class="to-inputText">{{ suffix }}</span>
-			<slot name="suffix"></slot>
-			<slot></slot>
-			<span v-if="suggestion" class="to-inputSuggestion">
-				<to-button v-for="(item,i) in suggestion.split(',')" :key="i" :fillet="$TouchUI.global.fillet" color="info" mode="text" @click="addSuggestion(item)">{{ item }}</to-button>
-			</span>
-		</span>
-		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
-			<template v-if="errorType === 'rule'">
-				输入有误
-				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
-			</template>
-			<template v-else>
-				不能为空
-			</template>
-		</span>
-	</span>
-</template>
-<script>
-import { filter } from '../../../src/utils/string.js'
-import Locale from 'ai.touchui-vue/src/mixins/locale'
-import Tip from 'ai.touchui-vue/src/mixins/tip'
-export default {
-	name: 'ToInput',
-	componentName: 'ToInput',
-	mixins: [Locale, Tip],
-	inheritAttrs: false,
-	inject: {
-		ToForm: {
-			default: ''
-		},
-		ToFormItem: {
-			default: ''
-		}
-	},
-	props: {
-		// 表单校验
-		desc: {
-			type: String,
-			default: ''
-		},
-		rule: {
-			type: String,
-			default: ''
-		},
-		id: {
-			type: String,
-			default: ''
-		},
-		required: {
-			type: Boolean,
-			default: null
-		},
-		verifiable: {
-			type: Boolean,
-			default: true
-		},
-		validateTip: {
-			type: String,
-			default: ''
-		},
-		propErrorType: {
-			type: String,
-			default: ''
-		},
-		propErrorTip: {
-			type: String,
-			default: ''
-		},
-
-		// 原生属性继承---------
-		placeholder: {
-			type: String,
-			default: null
-		},
-		type: {
-			type: String,
-			default: 'text'
-		},
-		tabindex: {
-			type: String,
-			default: '1'
-		},
-		autocomplete: Boolean,
-		readonly: Boolean,
-
-		// 原生属性优化---------
-		max: {
-			type: [String, Number],
-			default: Infinity
-		},
-		min: {
-			type: [String, Number],
-			default: -Infinity
-		},
-		maxlength: {
-			type: [String, Number],
-			default: Infinity
-		},
-
-		// 数值类型特殊属性---------
-		// 小数点位数
-		dot: {
-			type: [String, Number],
-			default: 0
-		},
-		// 步长（+-时用到）
-		step: {
-			type: [String, Number],
-			default: null
-		},
-		stepIconMode: {
-			type: String,
-			default: ''
-		},
-
-		// 安全---------
-		spChars: {
-			type: [String, Boolean],
-			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
-		},
-
-		// 插件---------
-		prefix: {
-			type: String,
-			default: ''
-		},
-		suffix: {
-			type: String,
-			default: ''
-		},
-		suggestion: {
-			type: String,
-			default: ''
-		},
-		suggestionType: {
-			type: String,
-			default: ''
-		},
-		suggestionSymbol: {
-			type: String,
-			default: '、'
-		},
-
-		// 基本功能-----------
-		clearable: Boolean,
-		preventFocus: Boolean,
-		comparable: Boolean,
-		value: {
-			type: [String, Number],
-			default() {
-				return this.step ? 0 : ''
-			}
-		},
-		html: {
-			type: [String, Number],
-			default: ''
-		},
-		trim: {
-			type: Boolean,
-			default: true
-		},
-
-		// 外观---------
-		fillet: {
-			type: String,
-			default() {
-				return this.$TouchUI.input.fillet || this.$TouchUI.global.fillet || 'normal'
-			}
-		},
-		filletPosition: {
-			type: String,
-			default: ''
-		},
-		color: {
-			type: String,
-			default: 'default'
-		},
-		placeholderColor: {
-			type: String,
-			default: ''
-		},
-		mode: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: [Number, String],
-			default: ''
-		},
-		height: {
-			type: [Number, String],
-			default: 1
-		},
-		link: Boolean,
-		focusWhenClear: { // filterable模式下清空数据是否弹出下拉框
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			errorTip: '',
-			errorType: 'rule',
-			valueStore: [],
-			prevent: false,
-			inited: false,
-			focused: false,
-			data: '',
-			clearVisible: false,
-			itype: 'text',
-			disabled: this.readonly,
-			multipleNumber: 1 // 将浮点数转为整数，避免 JS 精度丢失
-		}
-	},
-	computed: {
-		iPlaceholder() {
-			if (!this.disabled && !this.placeholder && this.placeholder !== '') {
-				return this.t('to.common.placeholder.input')
-			} else {
-				return this.placeholder
-			}
-		},
-		iconMode() {
-			if (this.mode === 'none' || this.mode === 'line' || this.focused) {
-				return 'none';
-			} else if (this.mode === 'fill') {
-				return 'fill';
-			} else {
-				return 'plain';
-			}
-		},
-		setClass() {
-			let arr = ['to-form-readonly'];
-			if (this.errorTip) {
-				arr.push('to-input-mode-line');
-				arr.push('to-input-color-danger');
-				arr.push('to-input-tip-show')
-			} else {
-				if (this.mode) {
-					arr.push(`to-input-mode-${this.mode}`);
-				} else if (this.ToForm && this.ToForm.type === 'list') {
-					arr.push('to-input-mode-none')
-				} else {
-					arr.push('to-input-mode-default');
-				}
-				if (this.color) {
-					if (this.color !== 'radam') {
-						arr.push(`to-input-color-${this.color}`);
-					} else {
-						let colors = this.$TouchUI.colors
-						let number = Math.round(Math.random() * 6)
-						arr.push(`to-input-color-${ colors[number]}`);
-					}
-				}
-			}
-			if (this.placeholderColor) {
-				arr.push(`to-input-placeholder-color-${this.placeholderColor}`);
-			}
-			if (this.fillet !== 'none') {
-				arr.push(`to-input-fillet-${this.fillet}`);
-			}
-			if (this.filletPosition) {
-				arr.push(`to-input-fillet-position-${this.filletPosition}`);
-			}
-			if (this.step) {
-				arr.push('to-input-step');
-			}
-			if (this.stepIconMode === 'arrow') {
-				arr.push(`to-input-step-icon-mode-${this.stepIconMode}`);
-			}
-			if (this.disabled && !this.link) {
-				arr.push('to-input-state-readonly');
-			}
-			if (this.focused && !this.preventFocus && !(this.ToForm && this.ToForm.type === 'list' && this.disabled)) {
-				arr.push('to-input-state-focus');
-			}
-			if (this.type === 'textarea') {
-				arr.push('to-input-type-textarea')
-			}
-			if (this.type === 'textarea' && (typeof this.height === 'number' || this.height > 1)) {
-				arr.push(`to-input-height-${this.height}`);
-			}
-			if (this.changed) {
-				arr.push('to-input-changed')
-			}
-			if (this.link) {
-				arr.push('to-input-link')
-			}
-			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
-				arr.push('to-compare')
-			}
-			return arr;
-		},
-		setStyle() {
-			var obj = {};
-			if (this.width) {
-				if (!isNaN(this.width)) {
-					obj.width = this.width + 'em';
-				} else if (this.width === 'full') {
-					obj.width = '100%';
-				} else {
-					obj.width = this.width;
-				}
-			}
-			return obj;
-		},
-		validateRequired() {
-			if (this.required === false) {
-				return 'false'
-			} else if (this.required) {
-				return 'true'
-			} else if (this.ToFormItem && this.ToFormItem.required) {
-				return 'true'
-			} else {
-				return 'false'
-			}
-		},
-		validateDesc() {
-			if (this.desc) {
-				return this.desc
-			} else if (this.ToFormItem && this.ToFormItem.label) {
-				return this.ToFormItem.label
-			} else {
-				return ''
-			}
-		},
-		changed() {
-			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.data !== this.valueStore[0]) {
-				return true
-			} else {
-				return false
-			}
-		}
-	},
-	watch: {
-		propErrorType(val) {
-			this.errorType = val
-		},
-		propErrorTip(val) {
-			this.errorTip = val
-		},
-		readonly(val) {
-			this.disabled = val
-		},
-		type(val) {
-			if (val === 'password') {
-				this.itype = val;
-			} else {
-				this.itype = 'text';
-			}
-		},
-		value(val) {
-			this.errorTip = ''
-			if (val === undefined || val === null) {
-				this.data = ''
-			} else {
-				this.data = val
-			}
-		},
-		data(val) {
-			if (this.inited) {
-
-				// 处理 IOS 下，to-input type=number 可以输入小数点
-				if (this.type === 'number' && Number(this.dot) === 0 && String(this.data).indexOf('.') > -1) {
-					this.data = this.data.replace('.', '')
-				}
-				if (this.spChars) {
-					const filterData = filter(this.spChars, this.data)
-					if (filterData !== false) {
-						this.data = filterData
-					}
-				}
-				this.limit()
-				this.$emit('input', this.trim ? String(this.data).trim() : this.data)
-				this.$emit('change', this.trim ? String(this.data).trim() : this.data);
-			}
-		}
-	},
-	created() {
-		this.data = this.value;
-		this.$nextTick(()=>{
-			this.inited = true
-		})
-		if (this.type === 'password') {
-			this.itype = this.type;
-		} else {
-			this.itype = 'text';
-		}
-	},
-	mounted() {
-		if (this.$platform === 'pc') {
-			this.$el.addEventListener('mouseover', this.showClear);
-			this.$el.addEventListener('mouseout', this.hideClear);
-		}
-		document.body.addEventListener('click', this.blur);
-	},
-	deactivated() {
-		this.destroy()
-	},
-	beforeDestroy() {
-		this.destroy()
-	},
-	methods: {
-		destroy() {
-			if (this.$platform === 'pc') {
-				this.$el.removeEventListener('mouseover', this.showClear);
-				this.$el.removeEventListener('mouseout', this.hideClear);
-			}
-			document.body.removeEventListener('click', this.blur);
-		},
-		addSuggestion(item) {
-			if (this.data.split(this.suggestionSymbol).includes(item)) {
-				return
-			}
-			if (this.suggestionType === 'multiple') {
-				let value = String(this.data)
-				if (value.trim()) {
-					this.data += this.suggestionSymbol
-				}
-				this.data += item
-			} else {
-				this.data = item
-			}
-		},
-		reduce() {
-			if (Number(this.min) < Number(this.data)) {
-				this.data = this.$NP.minus(Number(this.data), Number(this.step))
-				this.limit();
-			}
-		},
-		increase() {
-			if (Number(this.data) < Number(this.max)) {
-				this.data = this.$NP.plus(Number(this.data), Number(this.step))
-				this.limit();
-			}
-		},
-		inputKeyPress(event) {
-			if (this.type === 'number') {
-				if ((event.keyCode !== 46 || Number(this.dot) === 0) && (event.keyCode !== 45 || Number(this.min) >= 0) && (event.keyCode < 48 || event.keyCode > 57)) {
-					event.returnValue = false;
-				}
-			}
-		},
-		inputCut(event) {
-			this.$nextTick(() => {
-				this.$emit('cut', event);
-			});
-		},
-		inputPaste(event) {
-			this.$emit('paste', event);
-		},
-		inputChange(val) {
-			// 处理在 IOS 下，input 拿不到值的情况
-			if (this.type === 'text' && this.$platform === 'phone') {
-				this.data = this.$refs.input.value
-			}
-		},
-		inputKeyup(event) {
-			this.$emit('keyup', event);
-			if (![27, 16, 91, 18, 17, 93, 13, 9].includes(event.keyCode)) {
-				// 显示/隐藏清除按钮
-				if (this.data && this.data.length === 0) {
-					this.clearVisible = false;
-				} else {
-					this.showClear();
-				}
-			}
-		},
-		inputKeydown(event) {
-			if (this.disabled) {
-				// 避免只读输入框在 IE11 下退格会回退路由
-				let keycode = event.which || event.keyCode;
-				if (keycode === 8 || keycode === 46) {
-					event.preventDefault();
-					event.stopPropagation();
-					return false
-				}
-			}
-			this.$emit('keydown', event);
-		},
-		inputFocus(e) {
-			this.showClear()
-			this.errorTip = ''
-			this.focused = true
-			this.$emit('focus', e)
-		},
-		inputBlur(e) {
-			if (this.type === 'number') {
-
-				// 只有减号
-				if (this.data === '-' || this.data === '.') {
-					this.data = '';
-				}
-
-				// 最大值判断
-				if (Number(this.data, 0) > Number(this.max)) {
-					this.data = Number(this.max) + '';
-				}
-
-				// 最小值判断
-				if (Number(this.data, 0) < Number(this.min)) {
-					this.data = Number(this.min) + '';
-				}
-			}
-			this.focused = false;
-			this.$emit('blur', e)
-
-			const detail = {
-				name: 'ToInput',
-				value: this.data,
-				desc: this.validateDesc
-			}
-			this.$TouchUI.commitTouchReport(detail)
-		},
-		limit() {
-			if (this.type === 'number') {
-				// 先转换为纯数字字符串
-				this.data = (this.data + '').replace(/[^\d|\.|\-]/g, '');
-
-				// 多重负号去重
-				if (this.data.indexOf('-') > -1) {
-					if (this.data.indexOf('-') === 0) {
-						if (this.data.indexOf('.') === 1) {
-							this.data = '-0' + this.data.replace(/[-]/g, '');
-						} else {
-							this.data = '-' + this.data.replace(/[-]/g, '');
-						}
-					} else {
-						this.data = this.data.replace(/[-]/g, '');
-					}
-				}
-
-				// 小数点长度判断
-				if (this.data.indexOf('.') > -1) {
-					// 小圆点开头的自动补 0
-					if (this.data.indexOf('.') === 0) {
-						this.data = '0' + this.data;
-					}
-
-					// 分别获取和处理小数点前后的字符
-					let pre = this.data.substring(0, this.data.indexOf('.'));
-					let suf = this.data.substring(this.data.indexOf('.') + 1);
-
-					// 去掉小数点之后的所有小圆点并截取所需数量
-					suf = suf.replace(/[/.]/g, '').substring(0, Number(this.dot));
-
-					// 拼接字符串
-					this.data = `${pre}.${suf}`;
-				}
-			}
-		},
-		showClear() {
-			if (this.clearable && this.data && this.data.length > 0) {
-				this.clearVisible = true;
-			}
-		},
-		hideClear() {
-			if (!this.focused) {
-				this.clearVisible = false;
-			}
-		},
-		clear() {
-			this.data = '';
-			if (this.focusWhenClear) {
-				this.$refs.input.focus();
-			}
-			this.clearVisible = false;
-			this.$emit('clear');
-		},
-		focus() {
-			this.$refs.input.focus()
-		},
-		blur(e) {
-			var node = e.target;
-			while (node && node !== this.$el && node.nodeName !== 'BODY') {
-				node = node.parentNode;
-			}
-			if (node && node.nodeName === 'BODY' && this.clearable) {
-				this.clearVisible = false;
-			}
-			if (this.trim && this.data && typeof this.data === 'string') {
-				this.data = String(this.data).trim()
-			}
-		},
-
-		// 记录历史值，以便对比或者取值
-		compare() {
-			this.valueStore.unshift(this.data)
-		},
-		setDisabled(f) {
-			this.disabled = f
-		},
-		// 撤销
-		restore() {
-			this.data = this.valueStore[0]
-			this.valueStore.splice(0, 1)
-		}
-	}
-};
-</script>
+<template>
+	<span :id="id" v-tip="changed ? t('to.common.originalValue', valueStore[0]) : ''" class="to-input" :class="setClass" :style="setStyle" @click.stop="$emit('click')">
+		<span v-if="verifiable && (rule || required || ToFormItem.required)" v-show="false" :trim="trim" :req="validateRequired" class="to-validate" :desc="validateDesc" :rule="rule" :value="data"></span>
+		<span v-if="prefix || $slots.prefix || step" class="to-inputPrefix">
+			<slot name="prefix"></slot>
+			<span v-if="prefix" class="to-inputText">{{ prefix }}</span>
+			<to-icon v-if="step" v-dis="Number(data) === Number(min) || readonly" :value="stepIconMode ? 'unfold' : 'reduce'" link color="primary" mode="none" @mousedown.native="reduce"></to-icon>
+		</span>
+		<textarea
+			v-if="type === 'textarea'"
+			ref="input"
+			v-model="data"
+			:autocomplete="autocomplete ? 'on' : 'new-password'"
+			:maxlength="maxlength"
+			:placeholder="iPlaceholder"
+			:readonly="disabled"
+			:tabindex="tabindex"
+			@keyup="inputKeyup"
+			@keydown="inputKeydown"
+			@cut="inputCut"
+			@focus="inputFocus"
+			@blur="inputBlur"
+			@paste="inputPaste"
+			@keypress="inputKeyPress"
+			>
+		</textarea>
+		<span v-else-if="type === 'html'" class="to-inputHTML">
+			{{ html }}
+			<slot name="html"></slot>
+		</span>
+		<input
+			v-else
+			ref="input"
+			v-model="data"
+			:autocomplete="autocomplete ? 'on' : 'new-password'"
+			:tabindex="tabindex"
+			:maxlength="maxlength"
+			:placeholder="iPlaceholder"
+			:type="itype"
+			:readonly="disabled"
+			@keyup="inputKeyup"
+			@keydown="inputKeydown"
+			@cut="inputCut"
+			@focus="inputFocus"
+			@blur="inputBlur"
+			@paste="inputPaste"
+			@keypress="inputKeyPress"
+			@change="inputChange"
+			/>
+		<span v-if="clearable || suggestion || $slots.default || $slots.suffix || suffix || step" class="to-inputSuffix">
+			<to-icon v-if="clearable" v-show="clearVisible" class="to-inputClear" color="default" :mode="iconMode" link value="close" @click.stop="clear()"></to-icon>
+			<to-icon v-if="step" v-dis="Number(data) === Number(max) || readonly" :value="stepIconMode ? 'fold' : 'add'" link color="primary" mode="none" @mousedown.native="increase"></to-icon>
+			<span v-if="suffix" class="to-inputText">{{ suffix }}</span>
+			<slot name="suffix"></slot>
+			<slot></slot>
+			<span v-if="suggestion" class="to-inputSuggestion">
+				<to-button v-for="(item,i) in suggestion.split(',')" :key="i" :fillet="$TouchUI.global.fillet" color="info" mode="text" @click="addSuggestion(item)">{{ item }}</to-button>
+			</span>
+		</span>
+		<span v-if="errorTip" v-color="'danger'" class="to-box-tip">
+			<template v-if="errorType === 'rule'">
+				输入有误
+				<to-icon v-tip.danger="errorTip" value="help" color="danger" mode="toast" fillet="round"></to-icon>
+			</template>
+			<template v-else>
+				不能为空
+			</template>
+		</span>
+	</span>
+</template>
+<script>
+import { filter } from '../../../src/utils/string.js'
+import Locale from 'ai.touchui-vue/src/mixins/locale'
+import Tip from 'ai.touchui-vue/src/mixins/tip'
+export default {
+	name: 'ToInput',
+	componentName: 'ToInput',
+	mixins: [Locale, Tip],
+	inheritAttrs: false,
+	inject: {
+		ToForm: {
+			default: ''
+		},
+		ToFormItem: {
+			default: ''
+		}
+	},
+	props: {
+		// 表单校验
+		desc: {
+			type: String,
+			default: ''
+		},
+		rule: {
+			type: String,
+			default: ''
+		},
+		id: {
+			type: String,
+			default: ''
+		},
+		required: {
+			type: Boolean,
+			default: null
+		},
+		verifiable: {
+			type: Boolean,
+			default: true
+		},
+		validateTip: {
+			type: String,
+			default: ''
+		},
+		propErrorType: {
+			type: String,
+			default: ''
+		},
+		propErrorTip: {
+			type: String,
+			default: ''
+		},
+
+		// 原生属性继承---------
+		placeholder: {
+			type: String,
+			default: null
+		},
+		type: {
+			type: String,
+			default: 'text'
+		},
+		tabindex: {
+			type: String,
+			default: '1'
+		},
+		autocomplete: Boolean,
+		readonly: Boolean,
+
+		// 原生属性优化---------
+		max: {
+			type: [String, Number],
+			default: Infinity
+		},
+		min: {
+			type: [String, Number],
+			default: -Infinity
+		},
+		maxlength: {
+			type: [String, Number],
+			default: Infinity
+		},
+
+		// 数值类型特殊属性---------
+		// 小数点位数
+		dot: {
+			type: [String, Number],
+			default: 0
+		},
+		// 步长（+-时用到）
+		step: {
+			type: [String, Number],
+			default: null
+		},
+		stepIconMode: {
+			type: String,
+			default: ''
+		},
+
+		// 安全---------
+		spChars: {
+			type: [String, Boolean],
+			default: '/,\\,[,],{,},"' // 微软拼音输入法使用单引号做上屏前多个字符分隔符，不能过滤单引号
+		},
+
+		// 插件---------
+		prefix: {
+			type: String,
+			default: ''
+		},
+		suffix: {
+			type: String,
+			default: ''
+		},
+		suggestion: {
+			type: String,
+			default: ''
+		},
+		suggestionType: {
+			type: String,
+			default: ''
+		},
+		suggestionSymbol: {
+			type: String,
+			default: '、'
+		},
+
+		// 基本功能-----------
+		clearable: Boolean,
+		preventFocus: Boolean,
+		comparable: Boolean,
+		value: {
+			type: [String, Number],
+			default() {
+				return this.step ? 0 : ''
+			}
+		},
+		html: {
+			type: [String, Number],
+			default: ''
+		},
+		trim: {
+			type: Boolean,
+			default: true
+		},
+
+		// 外观---------
+		fillet: {
+			type: String,
+			default() {
+				return this.$TouchUI.input.fillet || this.$TouchUI.global.fillet || 'normal'
+			}
+		},
+		filletPosition: {
+			type: String,
+			default: ''
+		},
+		color: {
+			type: String,
+			default: 'default'
+		},
+		placeholderColor: {
+			type: String,
+			default: ''
+		},
+		mode: {
+			type: String,
+			default: ''
+		},
+		width: {
+			type: [Number, String],
+			default: ''
+		},
+		height: {
+			type: [Number, String],
+			default: 1
+		},
+		link: Boolean,
+		focusWhenClear: { // filterable模式下清空数据是否弹出下拉框
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			errorTip: '',
+			errorType: 'rule',
+			valueStore: [],
+			prevent: false,
+			inited: false,
+			focused: false,
+			data: '',
+			clearVisible: false,
+			itype: 'text',
+			disabled: this.readonly,
+			multipleNumber: 1 // 将浮点数转为整数，避免 JS 精度丢失
+		}
+	},
+	computed: {
+		iPlaceholder() {
+			if (!this.disabled && !this.placeholder && this.placeholder !== '') {
+				return this.t('to.common.placeholder.input')
+			} else {
+				return this.placeholder
+			}
+		},
+		iconMode() {
+			if (this.mode === 'none' || this.mode === 'line' || this.focused) {
+				return 'none';
+			} else if (this.mode === 'fill') {
+				return 'fill';
+			} else {
+				return 'plain';
+			}
+		},
+		setClass() {
+			let arr = ['to-form-readonly'];
+			if (this.errorTip) {
+				arr.push('to-input-mode-line');
+				arr.push('to-input-color-danger');
+				arr.push('to-input-tip-show')
+			} else {
+				if (this.mode) {
+					arr.push(`to-input-mode-${this.mode}`);
+				} else if (this.ToForm && this.ToForm.type === 'list') {
+					arr.push('to-input-mode-none')
+				} else {
+					arr.push('to-input-mode-default');
+				}
+				if (this.color) {
+					if (this.color !== 'radam') {
+						arr.push(`to-input-color-${this.color}`);
+					} else {
+						let colors = this.$TouchUI.colors
+						let number = Math.round(Math.random() * 6)
+						arr.push(`to-input-color-${ colors[number]}`);
+					}
+				}
+			}
+			if (this.placeholderColor) {
+				arr.push(`to-input-placeholder-color-${this.placeholderColor}`);
+			}
+			if (this.fillet !== 'none') {
+				arr.push(`to-input-fillet-${this.fillet}`);
+			}
+			if (this.filletPosition) {
+				arr.push(`to-input-fillet-position-${this.filletPosition}`);
+			}
+			if (this.step) {
+				arr.push('to-input-step');
+			}
+			if (this.stepIconMode === 'arrow') {
+				arr.push(`to-input-step-icon-mode-${this.stepIconMode}`);
+			}
+			if (this.disabled && !this.link) {
+				arr.push('to-input-state-readonly');
+			}
+			if (this.focused && !this.preventFocus && !(this.ToForm && this.ToForm.type === 'list' && this.disabled)) {
+				arr.push('to-input-state-focus');
+			}
+			if (this.type === 'textarea') {
+				arr.push('to-input-type-textarea')
+			}
+			if (this.type === 'textarea' && (typeof this.height === 'number' || this.height > 1)) {
+				arr.push(`to-input-height-${this.height}`);
+			}
+			if (this.changed) {
+				arr.push('to-input-changed')
+			}
+			if (this.link) {
+				arr.push('to-input-link')
+			}
+			if ((this.ToForm && this.ToForm.comparable) || this.comparable) {
+				arr.push('to-compare')
+			}
+			return arr;
+		},
+		setStyle() {
+			var obj = {};
+			if (this.width) {
+				if (!isNaN(this.width)) {
+					obj.width = this.width + 'em';
+				} else if (this.width === 'full') {
+					obj.width = '100%';
+				} else {
+					obj.width = this.width;
+				}
+			}
+			return obj;
+		},
+		validateRequired() {
+			if (this.required === false) {
+				return 'false'
+			} else if (this.required) {
+				return 'true'
+			} else if (this.ToFormItem && this.ToFormItem.required) {
+				return 'true'
+			} else {
+				return 'false'
+			}
+		},
+		validateDesc() {
+			if (this.desc) {
+				return this.desc
+			} else if (this.ToFormItem && this.ToFormItem.label) {
+				return this.ToFormItem.label
+			} else {
+				return ''
+			}
+		},
+		changed() {
+			if ((this.comparable || this.ToForm.comparable) && this.valueStore.length > 0 && this.data !== this.valueStore[0]) {
+				return true
+			} else {
+				return false
+			}
+		}
+	},
+	watch: {
+		propErrorType(val) {
+			this.errorType = val
+		},
+		propErrorTip(val) {
+			this.errorTip = val
+		},
+		readonly(val) {
+			this.disabled = val
+		},
+		type(val) {
+			if (val === 'password') {
+				this.itype = val;
+			} else {
+				this.itype = 'text';
+			}
+		},
+		value(val) {
+			this.errorTip = ''
+			if (val === undefined || val === null) {
+				this.data = ''
+			} else {
+				this.data = val
+			}
+		},
+		data(val) {
+			if (this.inited) {
+
+				// 处理 IOS 下，to-input type=number 可以输入小数点
+				if (this.type === 'number' && Number(this.dot) === 0 && String(this.data).indexOf('.') > -1) {
+					this.data = this.data.replace('.', '')
+				}
+				if (this.spChars) {
+					const filterData = filter(this.spChars, this.data)
+					if (filterData !== false) {
+						this.data = filterData
+					}
+				}
+				this.limit()
+				this.$emit('input', this.trim ? String(this.data).trim() : this.data)
+				this.$emit('change', this.trim ? String(this.data).trim() : this.data);
+			}
+		}
+	},
+	created() {
+		this.data = this.value;
+		this.$nextTick(()=>{
+			this.inited = true
+		})
+		if (this.type === 'password') {
+			this.itype = this.type;
+		} else {
+			this.itype = 'text';
+		}
+	},
+	mounted() {
+		if (this.$platform === 'pc') {
+			this.$el.addEventListener('mouseover', this.showClear);
+			this.$el.addEventListener('mouseout', this.hideClear);
+		}
+		document.body.addEventListener('click', this.blur);
+	},
+	deactivated() {
+		this.destroy()
+	},
+	beforeDestroy() {
+		this.destroy()
+	},
+	methods: {
+		destroy() {
+			if (this.$platform === 'pc') {
+				this.$el.removeEventListener('mouseover', this.showClear);
+				this.$el.removeEventListener('mouseout', this.hideClear);
+			}
+			document.body.removeEventListener('click', this.blur);
+		},
+		addSuggestion(item) {
+			if (this.data.split(this.suggestionSymbol).includes(item)) {
+				return
+			}
+			if (this.suggestionType === 'multiple') {
+				let value = String(this.data)
+				if (value.trim()) {
+					this.data += this.suggestionSymbol
+				}
+				this.data += item
+			} else {
+				this.data = item
+			}
+		},
+		reduce() {
+			if (Number(this.min) < Number(this.data)) {
+				this.data = this.$NP.minus(Number(this.data), Number(this.step))
+				this.limit();
+			}
+		},
+		increase() {
+			if (Number(this.data) < Number(this.max)) {
+				this.data = this.$NP.plus(Number(this.data), Number(this.step))
+				this.limit();
+			}
+		},
+		inputKeyPress(event) {
+			if (this.type === 'number') {
+				if ((event.keyCode !== 46 || Number(this.dot) === 0) && (event.keyCode !== 45 || Number(this.min) >= 0) && (event.keyCode < 48 || event.keyCode > 57)) {
+					event.returnValue = false;
+				}
+			}
+		},
+		inputCut(event) {
+			this.$nextTick(() => {
+				this.$emit('cut', event);
+			});
+		},
+		inputPaste(event) {
+			this.$emit('paste', event);
+		},
+		inputChange(val) {
+			// 处理在 IOS 下，input 拿不到值的情况
+			if (this.type === 'text' && this.$platform === 'phone') {
+				this.data = this.$refs.input.value
+			}
+		},
+		inputKeyup(event) {
+			this.$emit('keyup', event);
+			if (![27, 16, 91, 18, 17, 93, 13, 9].includes(event.keyCode)) {
+				// 显示/隐藏清除按钮
+				if (this.data && this.data.length === 0) {
+					this.clearVisible = false;
+				} else {
+					this.showClear();
+				}
+			}
+		},
+		inputKeydown(event) {
+			if (this.disabled) {
+				// 避免只读输入框在 IE11 下退格会回退路由
+				let keycode = event.which || event.keyCode;
+				if (keycode === 8 || keycode === 46) {
+					event.preventDefault();
+					event.stopPropagation();
+					return false
+				}
+			}
+			this.$emit('keydown', event);
+		},
+		inputFocus(e) {
+			this.showClear()
+			this.errorTip = ''
+			this.focused = true
+			this.$emit('focus', e)
+		},
+		inputBlur(e) {
+			if (this.type === 'number') {
+
+				// 只有减号
+				if (this.data === '-' || this.data === '.') {
+					this.data = '';
+				}
+
+				// 最大值判断
+				if (Number(this.data, 0) > Number(this.max)) {
+					this.data = Number(this.max) + '';
+				}
+
+				// 最小值判断
+				if (Number(this.data, 0) < Number(this.min)) {
+					this.data = Number(this.min) + '';
+				}
+			}
+			this.focused = false;
+			this.$emit('blur', e)
+
+			const detail = {
+				name: 'ToInput',
+				value: this.data,
+				desc: this.validateDesc
+			}
+			this.$TouchUI.commitTouchReport(detail)
+		},
+		limit() {
+			if (this.type === 'number') {
+				// 先转换为纯数字字符串
+				this.data = (this.data + '').replace(/[^\d|\.|\-]/g, '');
+
+				// 多重负号去重
+				if (this.data.indexOf('-') > -1) {
+					if (this.data.indexOf('-') === 0) {
+						if (this.data.indexOf('.') === 1) {
+							this.data = '-0' + this.data.replace(/[-]/g, '');
+						} else {
+							this.data = '-' + this.data.replace(/[-]/g, '');
+						}
+					} else {
+						this.data = this.data.replace(/[-]/g, '');
+					}
+				}
+
+				// 小数点长度判断
+				if (this.data.indexOf('.') > -1) {
+					// 小圆点开头的自动补 0
+					if (this.data.indexOf('.') === 0) {
+						this.data = '0' + this.data;
+					}
+
+					// 分别获取和处理小数点前后的字符
+					let pre = this.data.substring(0, this.data.indexOf('.'));
+					let suf = this.data.substring(this.data.indexOf('.') + 1);
+
+					// 去掉小数点之后的所有小圆点并截取所需数量
+					suf = suf.replace(/[/.]/g, '').substring(0, Number(this.dot));
+
+					// 拼接字符串
+					this.data = `${pre}.${suf}`;
+				}
+			}
+		},
+		showClear() {
+			if (this.clearable && this.data && this.data.length > 0) {
+				this.clearVisible = true;
+			}
+		},
+		hideClear() {
+			if (!this.focused) {
+				this.clearVisible = false;
+			}
+		},
+		clear() {
+			this.data = '';
+			if (this.focusWhenClear) {
+				this.$refs.input.focus();
+			}
+			this.clearVisible = false;
+			this.$emit('clear');
+		},
+		focus() {
+			this.$refs.input.focus()
+		},
+		blur(e) {
+			var node = e.target;
+			while (node && node !== this.$el && node.nodeName !== 'BODY') {
+				node = node.parentNode;
+			}
+			if (node && node.nodeName === 'BODY' && this.clearable) {
+				this.clearVisible = false;
+			}
+			if (this.trim && this.data && typeof this.data === 'string') {
+				this.data = String(this.data).trim()
+			}
+		},
+
+		// 记录历史值，以便对比或者取值
+		compare() {
+			this.valueStore.unshift(this.data)
+		},
+		setDisabled(f) {
+			this.disabled = f
+		},
+		// 撤销
+		restore() {
+			this.data = this.valueStore[0]
+			this.valueStore.splice(0, 1)
+		}
+	}
+};
+</script>