<template>
	<view class="r-top">
		<textarea :maxlength="len" @input="changeContent" placeholder-style="color:#C8C9CC;" v-model="content" :placeholder="pl" :style="{height:textAreaH}"/>
		<view class="r-top-t">
		 	<view></view>
			<view> {{contentLength}}/{{len}}</view>
		 </view>
	</view>
</template>

<script>
	export default {
		computed:{
			contentLength(){
				return this.content.length;
			}
		},
		props:{
			pl:{
				type: String,
				default: "请输入"
			},
			contentTxt:{
				type: String,
			},
			len:{
				type: Number,
				default: 200
			},
			textAreaH:{
				type: String,
				default: "160rpx"
			}
		},
		watch:{
			contentTxt(){
				this.content = this.contentTxt
			}
		},
		data() {
			return {
				content:this.contentTxt
			}
		},
		methods:{
			changeContent(){
				this.$emit('changeContent',this.content)
			}
		}
	}
</script>

<style>
.r-top{
	border-radius: 20rpx;
}
.r-top textarea{width: 100%;padding-bottom: 10rpx;font-size: 32rpx;}
.r-top-t{
	display: flex;
	justify-content: space-between;
	font-family:PingFang SC;
	font-weight:400;
	line-height:20px;
	color:rgba(153,153,153,1);
	opacity:1;
	color: #c8c9cc;	
}
</style>