526互联

Element textarea 行数限制，超过限定行数不允许输入

发布时间 2023-06-26 09:59:51作者: DL·Coder

代码

methods: {
    // 获取行数
    getRow(val) {
      let row = 0
      val.split('\n').forEach(item => {
        if (item.length === 0) {
          row += 1 //如果一行只有回车符就是行数增加一行
        } else {
          row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g, 'ab').length / 52)
          //item.replace(/[\u0391-\uFFE5]/g, 'ab'），这句只是把一个汉字替换成两个字母，进行长度划算
        }
      })
      return row
    }
},
watch: {
  'addEditForm.keywords': {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal, 'oldVal')
      if (newVal && this.getRow(newVal) > 15) {
        this.addEditForm.keywords = oldVal //如果超过8行就把输入的删除
        this.$message({
          message: '最多输入15行',
          type: 'warning'
        })
      }
    },
    deep: true
  }
}

传送门：https://blog.csdn.net/weixin_44093204/article/details/126526330