• el-input textarea显示自定义剩余字数

     效果

    验证只可以输入数字和换行

    1. //验证只可以输入数字和换行
    2. "输入码">
    3.  
      "form-conten">
    4.   
    5.   type="textarea"
    6.   :rows="5"
    7.   v-model="list"
    8.   placeholder="请输入，多个用换行隔开"
    9.   onkeyup="value=value.replace(/[^\d\n]/g,'')"
    10.   @input="status"
    11.   >
    12.   "el-input__count" >最多同时录入10个，已录入{{ num }}；
    13.
  • //js
  • status() {
  • if (this.list) {
  • if (this.num > 10) {
  • this.list = this.list.slice(
  • 0,
  • this.num- 1
  • );
  • }
  • this.num = this.list.length;
  • const arr = this.list.split("\n");
  • let str = "";
  • arr.forEach((el) => {
  • if (el) {
  • str += "," + el;
  • }
  • });
  • this.num = str.slice(1).split(",").length;
  • }
  • }
  • //css
  • .form-conten {
  • position: relative;
  • .el-input__count {
  • color: #A8A8A8;
  • position: absolute;
  • right: 10px;
  • bottom: 0;
  • }
  • }

  • 相关阅读:
    第三方软件测评报告怎么做？
    RocketMQ 消费者
    solidworks导出urdf文件
    在Vue项目中应用TypeScript
    字节一面：TCP 和 UDP 可以使用同一个端口吗？
    亚马逊测评术语有哪些？
    ali内核服务器搭建Linux版本的小皮面板(微调)
    JVM内存模型（面试题）
    【OSPP开源之夏2022】基于昇思MindSpore， 补齐创建Tensor的方法10+
    直接插入排序算法
  • 原文地址：https://blog.csdn.net/qq_42396791/article/details/126159681