element 输入框文字+对应签进行长度 和 的判断

news2024/10/1 17:27:02

输入文字长度 + 指定标签的长度 (判断长度并提示)

<div style="position: relative;" class='changyongyu'>
        <el-input type="textarea" :autosize="{ minRows: 8, maxRows: 8 }" style="margin-bottom:10px;"
          v-model.trim="ruleForm.content" maxlength="500" @input="inputchangyongyu" @change="inputchangyongyu"
          @paste.native.capture.prevent="handleFalse" 
          ></el-input>
        <div style="position: absolute;right: 10px;bottom: -10px;">{{
            textlength > 500 ? '500' : textlength }} / 500</div>
      </div>


// 计算长度字段属性添加 开始
  computed: {
    textlength() {
      // #{store_name}
      // #{store_phone}
      // #{store_addr}
      let num_store_name = 0
      let num_store_addr = 0
      let num_store_phone = 0
      let mintextlength = 0
      // 门店名称 : 25个字段   门店地址 :50个字段, 电话:15个字段  
      num_store_name = (this.ruleForm.content.match(/#{store_name}/g) || []).length * 25;
      num_store_addr = (this.ruleForm.content.match(/#{store_addr}/g) || []).length * 50;
      num_store_phone = (this.ruleForm.content.match(/#{store_phone}/g) || []).length * 15;
      mintextlength = this.ruleForm.content.replace(/#{store_name}/g, '').replace(/#{store_addr}/g, '').replace(/#{store_phone}/g, '')
      let num = num_store_phone + num_store_addr + num_store_name
      return num + mintextlength.length
    }
  },

// 计算属性结束



    inputchangyongyu(val) {
      if (this.textlength > 500) {
        this.$message.warning(`总字数超出了长度!请精简字数`);
        this.ruleForm.content = val.slice(0, -1);
        return val;
      }
    },
 //方法
    handleFalse(e) {
      let clip = e.clipboardData.getData('Text');
      let num =  this.textlength + clip.length
      if(num > 500){
        this.$message.warning(`粘贴字数超出了长度!请精简字数`);
        return true;        
      }else{
        this.ruleForm.content += String(clip)
      }
      //终止
    },

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2166374.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【React】useEffect

1. 基本介绍 概念 语法 副作用函数依赖项数组&#xff08;空数组时&#xff0c;只会在组件渲染完毕后执行一次副作用函数&#xff09; 2. 使用 import { useEffect, useState } from reactfunction App() {const [value, setValue] useState(0)useEffect(() > {console…

docker-图形化工具-portainer的使用

文章目录 1、安装和启动2、设置登陆密码3、dashboard 上述对容器和镜像的管理都是基于docker客户端的命令来完成&#xff0c;不太方便。为了方便的对docker中的一些对象(镜像、容器、数据卷…)来进行管理&#xff0c;可以使用Portainer来完成。Portainer是一个可视化的容器镜像…

Spring Boot 学习之路 -- Service 层

前言 最近因为业务需要&#xff0c;被拉去研究后端的项目&#xff0c;代码框架基于 Spring Boot&#xff0c;对我来说完全小白&#xff0c;需要重新学习研究…出于个人习惯&#xff0c;会以 Blog 文章的方式做一些记录&#xff0c;文章内容基本来源于「 Spring Boot 从入门到精…

如何帮助我们改造升级原有架构——基于TDengine 平台

一、简介 TDengine 核心是一款高性能、集群开源、云原生的时序数据库&#xff08;Time Series Database&#xff0c;TSDB&#xff09;&#xff0c;专为物联网IoT平台、工业互联网、电力、IT 运维等场景设计并优化&#xff0c;具有极强的弹性伸缩能力。同时它还带有内建的缓存、…

AI可信度标准与框架

AI 可信度被定义为&#xff1a;无论从技术层面还是社会层面&#xff0c;AI 在执行任务时均能够赢得用户的信任和接受的程度。具体地&#xff0c;一个高可信度的 AI 应包含两个组成部分&#xff0c;这些组成部分应贯穿于系统的整个生命周期&#xff1a; &#xff08;一&#xff…

数据结构 ——— C语言实现动态顺序表

目录 顺序表的概念 顺序表的结构&#xff08;静态顺序表和动态顺序表&#xff09; 1. 静态顺序表&#xff1a;使用固定长度的数组存储元素 2. 动态顺序表&#xff1a;使用动态开辟的数组存储元素 为什么选择实现动态顺序表 静态顺序表的缺点&#xff1a; 动态顺序表的优点…

读构建可扩展分布式系统:方法与实践15可扩展系统的基本要素

1. 可扩展系统的基本要素 1.1. 分布式系统在本质上就是复杂的&#xff0c;你必须考虑多种故障模式&#xff0c;并设计应对所有可能发生的情况的处理方式 1.2. 大规模应用程序需要协调大量的硬件和软件组件&#xff0c;共同实现低延迟和高吞吐量的能力 1.3. 面临的挑战是将所…

入门Django

Django Django 简介URL组成部分详解第一个Django项目创建一个Django项目运行Django项目项目结构介绍project和app的关系 URL与视图函数的映射URL的两种传参方式在URL中携带参数 path函数url路由模块化url反转 Django 简介 Django 是一个高级的 Python Web 框架&#xff0c;用于…

书生白嫖A100活动之——OpenCompass

内容来源&#xff1a;Tutorial/opencompass/readme.md at camp2 InternLM/Tutorial GitHub 概览 在 OpenCompass 中评估一个模型通常包括以下几个阶段&#xff1a;配置 -> 推理 -> 评估 -> 可视化。 配置&#xff1a;这是整个工作流的起点。您需要配置整个评估过…

HTML中的表单(超详细)

一、表单 1.语法 <!-- action&#xff1a;提交的地方 method&#xff1a;提交的方式&#xff08;get会显示&#xff0c;post不会&#xff09; --> <form action"#" method"get"><p>名字&#xff1a;<input name"name" ty…

【Geoserver使用】SRS处理选项

文章目录 前言一、Geoserver的三种SRS处理二、对Bounding Boxes计算的影响总结 前言 今天来看看Geoserver中发布图层时的坐标参考处理这一项。根据Geoserver官方文档&#xff0c;坐标参考系统 (CRS) 定义了地理参考空间数据与地球表面实际位置的关系。CRS 是更通用的模型&…

3. 轴指令(omron 机器自动化控制器)——>MC_MoveFeed

机器自动化控制器——第三章 轴指令 8 MC_MoveFeed变量▶输入变量▶输出变量▶输入输出变量 功能说明▶指令详情▶时序图▶重启运动指令▶多重启动运动指令▶异常 示例程序▶参数设定▶动作示例▶梯形图▶结构文本(ST) MC_MoveFeed 指定自外部输入的中断输入发生位置起的移动距…

2024免费录屏软件的宝藏功能与实用技巧

在手机上操作很多时候为了记录方便都直接截图或者录屏&#xff0c;其实电脑也一样。现在面向电脑的录屏工具纷繁复杂&#xff0c;很容易让我们挑花了眼。今天这篇文章我将介绍几款免费的录屏软件为大家提供参考。 1.福昕录屏大师 链接达达&#xff1a;www.foxitsoftware.cn/R…

深入探索 RUM 与全链路追踪:优化数字体验的利器

作者&#xff1a;梅光辉&#xff08;重彦&#xff09; 背景介绍 随着可观测技术的持续演进&#xff0c;多数企业已广泛采用 APM、Tracing 及 Logging 解决方案&#xff0c;以此强化业务监控能力&#xff0c;尤其在互联网行业&#xff0c;产品的体验直接关系着用户的口碑&…

使用Crawler实例进行网页内容抓取

网页内容抓取的背景 随着互联网的快速发展&#xff0c;网页上的信息量日益庞大。如何从海量的网页中快速、准确地抓取所需信息&#xff0c;成为了一个技术挑战。网页内容抓取技术通过自动化的方式&#xff0c;模拟用户浏览网页的过程&#xff0c;获取网页上的文本、图片、链接…

mybatisplus介绍以及使用(上)

目录 一、概念 1、什么是mybatisplus 2、为什么要使用mybatisplus 二、mybatisplus的使用 1、安装 2、常用注解 3、条件构造器 一、概念 1、什么是mybatisplus MyBatis-Plus&#xff08;简称MP&#xff09;是一个基于MyBatis的增强框架&#xff0c;旨在简化开发、提高…

学习C语言(20)

在这段没有更新的时间作者大一开学了&#xff0c;军训期间一直比较忙没时间学习&#xff0c;9月23号结束了为期十四天的军训&#xff0c;今天开始重新更学习C语言的博客 整理今天的学习内容 1.浮点数在内存中的储存 浮点数包括float&#xff0c;double&#xff0c;long doub…

vue实现左侧数据拖拽到右侧区域,且左侧数据保留且左侧数据不能互相拖拽改变顺序

一、案例效果 二、案例代码 封装左侧抽屉 DrawerSearch.vue <template><div><mtd-form :model"formDrawerSearch" ref"formCustom" inline><mtd-form-item><mtd-inputtype"text"v-model"formDrawerSearch.hos…

美团一面:给定两棵二叉树 `A` 和 `B`,判断 `B` 是否是 `A` 的子结构?

目录标题 问题描述思路分析代码解释详细步骤复杂度分析 问题描述 给定两棵二叉树 A 和 B&#xff0c;判断 B 是否是 A 的子结构。所谓子结构是指 B 中任意节点在 A 中存在相同的结构和节点值。 例子1&#xff1a; 输入&#xff1a;tree1 [1,7,5], tree2 [6,1] 输出&#…

LeaferJS 动画、状态、过渡、游戏框架

LeaferJS 现阶段依然专注于绘图、交互和图形编辑场景。我们引入游戏场景&#xff0c;只是希望让 LeaferJS 被更多有需要的人看到&#xff0c;以充分发挥它的价值 LeaferJS 为你带来了全新的游戏、动画、状态和过渡功能&#xff0c;助你实现那些年少时的游戏梦想。我们引入了丰富…