本文主要是介绍uniapp vue input和textarea 的用法区别，一篇就懂，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vue input 和 textarea 组件区别：
input 单行输入，一般用户一行输入完成，不会自动换行，而且默认输入光标垂直居中，还不好设置，一般在组件后面垫一个view，方便设置交互UI：
//input>>>
设计背景获焦时边框等UI
<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" :maxlength="10" :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>>>
<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.valueconsole.log(TAG, "==onKeyInput==inputContent:" + this.inputContent)},
onInputFocus(event) {
console.log(TAG, “onInputFocus”)
this.isInputFocused = true
this.inputPlaceText = ‘’
},
onInputLostFocus(event) {console.log(TAG, "==onInputLostFocus==")this.isInputFocused = falsethis.inputPlaceText = '请在这里输入'},
两个通过onKeyInput方法接收输入的文本内容，
white-space: pre-wrap;
word-break: break-all;
overflow: hidden;
这三个属性设置自动换行和处理换行符等兼容性
这篇关于uniapp vue input和textarea 的用法区别，一篇就懂的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
