vue实现textarea框，文字高度自适应，/qq_38128179/article/details/103591717
下面是两种方式，注释掉的是一种，不可以输入字数超出100字，另一种是可以超出，超出字数变红提示
<template><div class="textarea"><!-- <Fieldv-model="memo"rows="5":placeholder="placeholderText"type="textarea":maxlength="maxlength"show-word-limitborder@focus="onInput"ref="memo":value="parameter.text"@input="inputHandler":autosize="true"/> --><textareastyle="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 = falsethis.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>
