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

  • 相关阅读:
    1. 开发环境搭建
    HTML核心（9）- 列表元素
    程序环境与预处理笔记
    Java每日笔试题错题分析（1）
    对中台的探索与思考
    【ViT 微调时关于position embedding如何插值（interpolate）的详解】
    计算机毕业设计(40)java毕设作品之在线购物网站销售系统
    Maven的介绍和使用
    android应用开发基础知识，安卓面试2020
    如何使用Google Analytics跟踪WordPress网站的用户参与度
  • 原文地址：https://blog.csdn.net/qq_42396791/article/details/126159681