vue实现textarea框，文字高度自适应

vue实现textarea框，文字高度自适应，https://blog.csdn.net/qq_38128179/article/details/103591717

下面是两种方式，注释掉的是一种，不可以输入字数超出100字，另一种是可以超出，超出字数变红提示

<template>
  <div class="textarea">
    <!-- <Field
          v-model="memo"
          rows="5"
          :placeholder="placeholderText"
          type="textarea"
          :maxlength="maxlength"
          show-word-limit
          border
          @focus="onInput"
          ref="memo"
          :value="parameter.text"
          @input="inputHandler"
          :autosize="true"
        /> -->

    <textarea
      style="width: 100%"
      cols="40"
      rows="5"
      :placeholder="placeholderText"
      :minlength="maxlength"
      v-model="memo"
      ref="form__input"
      id="textarea"
      v-on:keyup="content()"
      :onFocus="focus()"
      :onBlur="blur()"
      @input="handleInput"
    >
    </textarea>
    <p class="textNum">
      <span :class="conterNum > maxlength ? 'conter_Num' : ''">{{
        conterNum
      }}</span>
      <span>/{{ maxlength }}</span>
    </p>
  </div>
</template>

<script>
import { Field, Toast } from 'vant';
import 'vant/lib/index.less';
import { resize } from '@/utils/resize';

export default {
  name: 'Demo',
  components: {
    Field, Toast
  },
  data () {
    return {
      notNumbers: false,
      conterNum: 0,
      maxlength: 100,
      memo: '',
      placeholderText: "请输入您的问题",
      parameter: {
        text: ""
      }
    }
  },
  created () {
    resize()
  },
  mounted () {
    // this.$refs.form__input.focus()//一进页面弹出键盘
  },
  methods: {
    //根据输入长度高度自适应
    handleInput (e) {
      e.target.style.height = 'auto';
      e.target.style.height = e.target.scrollHeight + 'px';
    },
    content () {
      this.notNumbers = false
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },
    focus () {
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },
    blur () {
      this.conterNum = this.memo.length;
      this.parameter.text = this.memo
    },

    // onInput () {
    //   this.$refs.memo.focus();
    // },
    // inputHandler (value) {
    //   value = this.max > 0 ? Math.min(value, this.max || 0) : value
    //   this.$emit('input', value)
    //   this.parameter.text = value
    //   if (value.length >= this.maxlength) {
    //     Toast(`最多输入${this.maxlength}字`)
    //     this.$ZhiYue.toast(`最多输入${this.maxlength}字`)
    //   }
    // },
  },
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

.textarea {
  margin: 0.2rem 0.32rem 0 0.32rem;
}

.input {
  height: 0.9rem;
  border: none !important;
  border-radius: 0.08rem;
  outline: none;
  font-size: 15px;
  border-radius: 0.1rem;
  flex: 7;
}
::v-deep .van-cell {
  font-size: 0.32rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #cccccc;
}
::v-deep .van-field__control {
  font-size: 0.3rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 0.44rem;
}

input::-webkit-input-placeholder {
  font-size: 0.3rem;
  line-height: 0.3rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: #cccccc;
}
#textarea {
  border: 1px solid #f3f3f3;
  font-size: 0.3rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #333333;
  outline: none;
  resize: none;
  border: none;
}
textarea::-webkit-input-placeholder {
  font-size: 0.32rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #cccccc;
}
.textNum {
  position: absolute;
  right: 0.32rem;
  font-size: 0.26rem;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: right;
  color: #999999;
}
.conter_Num {
  color: #ff3e3e;
}
</style>