uniapp里textarea多行文本输入限制数量

<template>
  <view class="inputs">
    <textarea class="text1" maxlength=50 placeholder='请输入...' @input="sumfontnum"></textarea>
    <text class="text2">{{fontNum}}/50</text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        fontNum:0
      }
    },
    methods: {
      // 限制文本框字数
      sumfontnum(e) {
        console.log(e)
        this.fontNum = e.detail.value.length
      }
    }
  }
</script>
<style scoped>
  .inputs{
     height: 170rpx;
     border: 2rpx solid #EAEAEA;
     border-radius: 10rpx;
     padding-top: 34rpx;
     padding-left: 35rpx;
     padding-right: 35rpx;
  }
  .text1{
    width: 100%;
     color: #000000;
     height: 130rpx;
     font-size: 26rpx;
  }
  .text2{
    height: 40rpx;
    line-height: 40rpx;
     color: #000000;
     font-size: 20rpx;
     float: right;
     margin-top: -10rpx;
  }
</style>