el-input文本框限制行数的实现

  需求：最多输入50行，右下角数字代表当前输入行数，如果超过50行，则无法继续输入。

一.效果展示

二.具体实现

1.监听输入内容

<el-input

          v-model="formData.labelValue"

          show-word-limit

          @input="handleInput"

          :autosize="{ minRows: 8, maxRows: 8 }"

          style="width: 367px;"

          placeholder="请输入"

          type="textarea"

        />

2.判断当前内容行数，及是否换行

// 最多50行限制

// 处理键盘按下事件，限制换行  

const handleInput = () => {

  // 计算当前输入文本的行数

  lines.value = formData.labelValue.split('\n').length

  // 如果超过最大行数，则限制输入

  if (lines.value > maxLines.value) {

    formData.labelValue = formData.labelValue.split('\n').slice(0, maxLines.value).join('\n')

  }

}

 3.右下角行数展示

 <span class="number-place">{{ formData.labelValue.split('\n').length }} / 50</span>

 4.行数展示样式

.number-place{

  position: absolute;

    right: 10px;

    bottom: 0;

    color: #999;

    font-size: 12px;

    z-index: 100;

}

 二.源码

<el-form-item label="标签值" prop="labelValue">
          <el-input
          v-model="formData.labelValue"
          show-word-limit
          @input="handleInput"
          :autosize="{ minRows: 8, maxRows: 8 }"
          style="width: 367px;"
          placeholder="请输入"
          type="textarea"
        />
        <span class="number-place">{{ formData.labelValue.split('\n').length }} / 50</span>
      </el-form-item>


// 最多50行限制
// 处理键盘按下事件，限制换行  
const handleInput = () => {
  // 计算当前输入文本的行数
  lines.value = formData.labelValue.split('\n').length

  // 如果超过最大行数，则限制输入
  if (lines.value > maxLines.value) {
    formData.labelValue = formData.labelValue.split('\n').slice(0, maxLines.value).join('\n')
  }
} 

<style scoped lang="less">
::v-deep(.textarea-style){
    height: 50px !important;
}
.number-place{
  position: absolute;
    right: 10px;
    bottom: 0;
    color: #999;
    font-size: 12px;
    z-index: 100;
}
</style>