vue改造textarea多行文本框样式

代码如下（有注释）,因为这个是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