uniapp vue input和textarea 的用法区别，一篇就懂

vue input 和 textarea 组件区别：
class= horizontal center, 这两个class是定义在app.vue中的style可共用的class（主要给我这样的小白解释下，大佬请忽略此行）

input 单行输入，一般用户一行输入完成，不会自动换行，而且默认输入内容和光标垂直居中（不管设置多高，光标始终居中显示），而且目前我这个小菜鸡不知道如何设置从左上角开始输入，所以个人只在小输入框使用input，自动换行输入比如反馈界面等就是用textarea，希望给各位以参考，也希望得到指正

<view class="horizontal center" :style="{width: '398rpx', height: '80rpx',
	backgroundColor: 'rgba(246, 247, 251, 1)', borderRadius: '16rpx', borderStyle:'solid',
	borderColor: (isInputFocused ? 'rgba(37, 82, 245, 1)' : 'rgba(246, 247, 251, 1)'), 
	borderWidth: '2rpx'}">
	<input class="input-phone" :maxlength="11" :placeholder="inputPlaceText" @input="onKeyInput" 
		confirm-type="confirm" @focus="onInputFocus" @blur="onInputLostFocus" v-model="inputClearValue" 
		placeholder-style="color: rgba(22,24,18,0.3);"/>
</view>

	.input-phone {
		width: 478rpx;
		height: 34rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: $uni-color-title;
		align-self: center;
		disable-default-padding : true;
		cursor-color: rgba(37, 82, 245, 1);
	}

textarea 多行输入，会自动换行，并且输入时光标起始位置在左上方而不是input的垂直居中，缺点行高不生效，单行输入时垂直居中需要精确控制边距

		<view class="horizontal center" style="width: 686rpx; height: 400rpx; background-color: white; 
			border-radius: 16rpx; margin-top: 30rpx;">
			<textarea id="feedInput" class="input" @input="onKeyInput" :placeholder="inputPlaceText" :maxlength="500"
				@focus="onInputFocus" @blur="onInputLostFocus" v-model="inputClearValue"
				placeholder-style="color: rgba(22,24,18,0.3);"></textarea>
		</view>
		
	.input {
		width: 638rpx;
		height: 352rpx;
		line-height: 40rpx;
		white-space: pre-wrap;
		word-break: break-all;
		overflow: hidden;
		font-size: 28rpx;
		color: rgba(22, 24, 18, 1);
		cursor-color: rgba(37, 82, 245, 1);
	}
	
	onKeyInput(event) {
		this.inputContent = event.target.value
		console.log(TAG, "==onKeyInput==inputContent:" + this.inputContent)
	},
			
	onInputLostFocus(event) {
		console.log(TAG, "==onInputLostFocus==")
		this.isInputFocused = false
		this.inputPlaceText = '请在这里输入'
	},

1. 一般在输入组件外包裹一层view，方便设置交互UI ，如获焦时背景、边框等：在动态 :style={} 中设置如下
   （borderColor: (isInputFocused ? ‘rgba(37, 82, 245, 1)’ : ‘rgba(246, 247, 251, 1)’）

2. 两个通过onKeyInput方法接收输入的文本内容，
   white-space: pre-wrap;
   word-break: break-all;
   overflow: hidden;
   这三个属性设置自动换行和自动输入换行符生效等兼容性，

3. 另外 v-model=“inputClearValue” 此方法用来控制清除输入内容的，当需要清空输入内容时，将data中定义的字段 inputClearValue=‘’ 即可，