• 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;
  • }
  • }

  • 相关阅读:
    Ansible概述以及模块
    详解Spring Boot中@PostConstruct的使用
    分布式事务，单JVM进程与多数据库，分布式事务技术选型，0-1过程，代码全。
    面向OLAP的列式存储DBMS-9-[ClickHouse]的常用日期时间操作
    复习leetcode第二题：两数相加
    你的应用安全吗？应用安全问题知多少？
    centos7 探测某个tcp端口是否在监听
    【Hive】CDPHiveNULL值排序前后的问题
    6.springboot的重要注解和核心配置文件（.properties 文件和 .yml 文件）
    nacos
  • 原文地址：https://blog.csdn.net/qq_42396791/article/details/126159681