代码如下（有注释）,因为这个是h5，如果需要pc端的，自行把rem乘100转换成px

<template>
<div class="contain"><textarea v-model="textareaSeason"placeholder="请输入具体原因"class="textarea"maxlength="40"></textarea><!-- 右下角显示文字 --><div class="word-limit"><span class="green">{{ textareaSeason.length }}</span>/40</div>
</div>
</template><script>export default {data () {return {textareaSeason: "",}},methods:{}}
</script><style lang="scss" scoped>
.contain {position: relative;
}
/* 设置textarea框提示内容的样式 */
.textarea::-webkit-input-placeholder{font-size: 0.14rem;font-weight: 400;color: rgba(0, 0, 0, 0.2500);
}
/*webkit 内核浏览器*/
.textarea::-moz-placeholder{font-size: 0.14rem;font-weight: 400;color: rgba(0, 0, 0, 0.2500);
}
/*Mozilla Firefox 19+*/
.textarea:-moz-placeholder{font-size: 0.14rem;font-weight: 400;color: rgba(0, 0, 0, 0.2500);
}
/*Mozilla Firefox 4 to 18*/
.textarea:-ms-input-placeholder{font-size: 0.14rem;font-weight: 400;color: rgba(0, 0, 0, 0.2500);
}
.textarea {border: none; // 去除边框outline: none; // 去除聚焦边框resize: none; // 去除右下的可拖动appearance: none; // 去除内阴影样式padding: 0.12rem; // 增加内边距box-sizing: border-box;height: 0.96rem;background: #EEEEEE;border-radius: 0.03rem;width: 100%;margin-bottom: 0.12rem;
}
// 0/40提示，使用绝对定位
.word-limit {.green {color: #00D76E;}position: absolute; right: 0.1rem;bottom: 0.25rem;font-size: 0.12rem;font-weight: 400;color: #999999;
}
</style>

个人纯原创的公众号：安哥说前端，会分享一些自己在项目上用到的组件、封装、大前端或者业务逻辑知识等，希望大家能关注，谢谢！

本文链接来自自己的公众号文章链接：手写改造textarea多行文本框今天手写了一个textarea多行文本样式和可以实现输入文字与右下角同步对照。代码如下（有注释）,因为这个是https://mp.weixin.qq.com/s?__biz=Mzk0MzM4OTkwMA==&mid=2247483677&idx=1&sn=eab16f436596bf5e240d6ee7cb6e51b8&chksm=c335ecbef44265a8b6a07163f62bb947f1fc30104101d24a2e61d1729a74ce6ce3239b71eb01#rd