textarea隐藏滚动条显示全部

1、方法一：
适用于没有内容第一次输入内容的textarea

2、方法二：
使用contenteditable+textarea的方法，不足地方是在Android上会出现placeholder 的光标与文字不居中。

     
{{textareaContent}}
          


.textarea-wrapper {
  position: relative;
  display: block;
  width: 100%;
  padding: .1rem 0;
}
.content-editable {
    position: relative;
    z-index: -1;
    opacity: 0;
    display: block;
    width: 100%;
    font-size: .32rem;
    color: #666;
    padding: .1rem 0;
}
.field-textarea {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: .1rem 0 0 0.4rem;
    font-size: .32rem;
    color: #464545;
    text-align: left;
    resize: none;
    overflow: hidden;
    background-color: transparent;
}
textarea:focus {
  border: 1px solid #6cb1ff;
  border-radius: 0.08rem;
}
textarea::placeholder {
      text-align: left;
      font-size: .32rem;
      color: #f00;
      padding: 0rem;
      margin: 0;
}

3、方法三：在Vue中使用
textarea组件

import Vue from 'vue';
import textareaVue from './textarea.vue';

Vue.directive('autoheight', {
  // 当被绑定的元素插入到 DOM 中时……
  update: function (el) {
    // 聚焦元素
    el.style.height = el.style.height || "5px";
    el.style.height = (el.scrollHeight) + "px";
  }
})

export default textareaVue

使用场景