原理很简单,只要通过 textarea 的 @input 事件 就能拿到 所有的参数
图中所示 是输入字符长度
可通过 console.log( e.detail.cursor) 打印
<template>
<view class="content">
<view class="describe">
<view class="describe_kuang">
<textarea maxlength="1000" @input="getlenth" placeholder="温馨提示:您可将职位描述通过微信、QQ传送到手机上,再复制粘贴到此处,谢谢。" />
</view>
<view class="describe_text"><text>{{length}}</text>/<label>1000</label></view>
</view>
<view class="preservation">
<label class="preservation-bot">保存</label>
</view>
</view>
</template>
<script>
export default {
data(){
return {
length:0
}
},
onl oad(){
},
methods: {
getlenth(e){
this.length = e.detail.cursor;
}
}
}
</script>
<style>
.describe{ width: 94%; height: auto; margin: 25upx auto; background: #fff; border-radius: 10px; box-sizing: border-box; padding: 30upx 3%; box-shadow: 0px 3px 13px rgba(0,0,0,0.02); }
.describe_kuang{ width: 100%; height: 450upx; margin-bottom: 25upx; }
.describe_kuang textarea{ width: 100%; height: 450upx; font-size: 15px; line-height: 45upx; }
.describe_text{ width: 100%; height: auto; display: flex; flex-direction: row; justify-content: flex-end; font-size: 15px; color: #686868; }
.describe_text text{ color: #2ebbfe; }
</style>