uni-app组件总结一：input和textarea，以及textarea显示在最上面的解决方案

input

html

	<view class="cu-form-group ">
		<view class="title">姓名</view>
		<input placeholder="请输入姓名" type="text" :value="item.name" @input="nameInput"/>
		//或者
		//<input placeholder="请输入姓名" type="text" v-model="item.name"/>
	</view>

data

item:{
		name:"123"
}

js

nameInput(e) {
	this.item.name = e.detail.value;
},

效果

比如type=idcard时在安卓手机上

type=number

textarea

html

	<view class="cu-form-group ">
		<view class="title">描述</view>
		<textarea placeholder="请输入" type="text" :value="item.text" @input="textInput"/>
		//或者
		//<textarea placeholder="请输入" type="text" v-model="item.text"/>
	</view>

data

item:{
		text:"123"
}

js

textInput(e) {
	this.item.text= e.detail.value;
},

效果

textarea组件在微信小程序属于原生组件处于最高级 （苹果和开发工具上是正常的，安卓是一直显示在最上面）

解决方法一 cover-view

应用场景：显示在固定定位上方
官方文档的描述：

cover-view：可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

把应该覆盖在textarea上的组件用cover-view表示
我没试过网上说是可以的，在这里只是记录一下

解决方法二 亲测

应用场景：显示模态框上面
描述解决方法：当模态框显示时，textarae 隐藏 text显示

		<view class="cu-form-group align-start">
			<view class="title">描述</view>
			<!-- //modalName=='DialogModal'表示显示模态框 -->
			<text v-if="modalName=='DialogModal'" class="textarea">
				<text v-if="item.text">{{item.text}}</text>
				<text class="text-grey" v-else>请输入</text>
			</text>
			<textarea v-else maxlength="-1" v-model="item.text" placeholder="请输入"></textarea>
		</view>

css

	//这个样式是我在网页上找到跟textarea 效果一样，这样才不会有视觉差
	.textarea{
		margin: 32rpx 0 30rpx;
		height: 4.6em;
		width: 100%;
		line-height: 1.2em;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		font-size: 28rpx;
		padding: 0;
	}