多行文本域

最新推荐文章于 2023-04-12 18:48:16 发布

qq614756883

最新推荐文章于 2023-04-12 18:48:16 发布

阅读量449

点赞数

分类专栏： JavaScript js vue 文章标签：大数据

本文链接：https://blog.csdn.net/weixin_45938332/article/details/125487819

版权

JavaScript 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

vue

23 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

<template>
	<view class="container">
		<view class="content">
			<view class="explain_box">
				<view class="blue_icon"></view>
				<view class="explain_text">
					变更说明 
					<span style="color:#FF0C5C">*</span>
				</view>
				<view class="input_box">
					<textarea v-model="changeValue"
						 @input="descInput" placeholder-class="phClass"
						 placeholder="请输入变更说明"
						 class="uni-input" maxlength="200">
					</textarea>
					<span class="numberv">{{txtVal}}/200</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			  changeValue:'',	
			  txtVal: 0,
			};
		},
		methods:{
			descInput(){
				this.txtVal = this.changeValue.length
			},
		}
	}
</script>

<style lang="less">
	.content{
		width: 690rpx;
		height: 361rpx;
		background-color: #fff;
		margin: 24rpx auto 0 auto;
		border-radius: 20rpx;
		.explain_box{
			padding: 35rpx 30rpx  61rpx 30rpx;
			.blue_icon{
				width: 8rpx;
				height: 28rpx;
				background: #027AFF;
				border-radius: 4px;
			}
			.explain_text{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin: -33rpx 0 0 20rpx;
			}
		}
		.uni-input{
			// border: 1px solid red;
			width: 582rpx;
			height: 160rpx;
		}
		.phClass{
			color: #E3E3E3;
			font-size: 26rpx;
		}
		.input_box{
			border: 1px solid #E3E3E3;
			width: 582rpx;
			height: 200rpx;
			position: relative;
			margin-top: 36rpx;
			padding: 25rpx 24rpx 0 24rpx;
			.numberv{
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}

</style>