uni小程序——评论、文本域、发送、键盘调起、有值后按钮变色等

一、简介

文本域默认显示一行，最多显示4行，到了4行之后不再增高。
输入值后按钮变色

二、案例演示

三、代码

<template>
	<view>
		<view class="plBox">
			<textarea auto-height="true" maxlength="-1" :show-confirm-bar="false" cursor-spacing="100" fixed="true"
				placeholder="评论" v-model="plValue" @input="changeDisabled"></textarea>
			<button plain="true" @click="send" :disabled="disabled">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认禁止点击按钮
				disabled: true,
				plValue: ''
			}
		},

		onLoad() {

		},
		methods: {
			changeDisabled(e) {
				console.log(e);
				if (e.detail.value != "") {
					this.disabled = false;
				} else {
					this.disabled = true;
				}
			},
			send() {
				// console.log("点击发送", this.plValue);
				this.$emit("sendTxt", this.plValue)
			}
		}
	}
</script>

<style lang="scss">
	.plBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100rpx;
		padding: 20rpx 20rpx 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		display: flex;
		justify-content: space-between;
		align-items: center;

		textarea {
			flex: 7;
			flex-shrink: 0;
			border-radius: 15rpx;
			max-height: 140rpx !important;
			margin-right: 30rpx;
			border: none;
			background-color: #ffffff;
			padding: 20rpx;
		}

		button {
			flex: 1;
			border: 1px solid #D3D3D3;
			color: #ffffff;
			margin: 0;
			padding: 0 5rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 30rpx;
			background-color: #304D99;
		}
	}
</style>

网址：https://uniapp.dcloud.net.cn/component/textarea.html

auto-height="true"          //开启自动增高
:show-confirm-bar="false"   //不显示键盘上方带有”完成“按钮那一栏
cursor-spacing="100"        //指定光标与键盘的距离，不然会有遮挡
fixed="true"                //如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true