school-shunt-app/components/u-input/u-input.vue

<template>
	<view class="u-input-container" :class="{'has-sumbit-button': sumbitButton}">
		<textarea v-if="type==='textarea'" type="digit" style="min-height:100rpx" @blur="blur" auto-height
			@focus="isFocus=true" class="u-input" :value="inputValue" :focus="isFocus"
			@input="e=>change(e.detail.value)" :placeholder="placeholder">
		</textarea>
		<input v-else-if="type==='digit'" type="digit" @blur="blur" @focus="isFocus=true" class="u-input"
			:value="inputValue" :focus="isFocus" @input="e=>change(e.detail.value)" :placeholder="placeholder">
		</input>
		<input v-else-if="type==='number'" type="number" @blur="blur" @focus="isFocus=true" class="u-input"
			:value="inputValue" :focus="isFocus" @input="e=>change(e.detail.value)" :placeholder="placeholder">
		</input>
		<input v-else @blur="blur" @focus="isFocus=true" class="u-input" :value="inputValue" :focus="isFocus"
			@input="e=>change(e.detail.value)" :placeholder="placeholder">
		</input>

		<uni-icons v-if="inputValue && isFocus" class="input-clear" @click="clear" type="clear" size="16"
			color="#9FA5BA" />
		<button v-if="sumbitButton" :disabled="!inputValue" @click="sumbit" class="sumbit-button" size="mini"
			type="primary">完成</button>
	</view>
</template>

<script>
	export default {
		name: "u-input",
		model: {
			prop: 'inputValue',
			event: 'change'
		},
		props: {
			inputValue: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: ''
			},
			sumbitButton: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: ''
			},

		},
		data() {
			return {
				value: '',
				isFocus: false
			}
		},
		watch: {
			value: {
				handler() {
					this.$emit('change', this.value)
				},
				deep: false,
				immediate: true
			},
		},
		mounted() {
			this.value = this.inputValue
		},
		methods: {
			change(value) {
				this.$emit('change', value)
			},
			clear() {
				this.change('')
				const that = this
				setTimeout(function() {
					that.isFocus = true
				}, 200);
			},
			blur() {
				const that = this
				setTimeout(function() {
					that.isFocus = false
					that.setBlur()
				}, 100);
			},
			setBlur() {
				const that = this
				setTimeout(function() {
					that.isFocus === false && that.$emit('blur')
				}, 400);
			},
			sumbit() {
				this.$emit('sumbit', this.inputValue)
				const that = this
				setTimeout(function() {
					that.isFocus = true
				}, 200);
			}

		}
	}
</script>

<style lang="scss">
	.u-input-container {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;

		.u-input {
			width: 100%;
			height: 100%;
			position: relative;
			padding-top: 4rpx;

		}

		.input-clear {
			padding: 12rpx 0 12rpx 12rpx;
			cursor: pointer;
		}

		.sumbit-button {
			display: flex;
			justify-content: center;
			align-items: center;

			font-size: 28rpx;
			color: #FFFFFF;
			padding: 12rpx 16rpx;
			white-space: nowrap;
			line-height: 1;
			margin-left: 16rpx;
		}
	}

	.has-sumbit-button {}
</style>
<style lang="scss">
	input,
	textarea {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
		font-weight: 400;
		color: #A3ABBF;
	}
</style>