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

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

<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 = 0let num_store_addr = 0let num_store_phone = 0let 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_namereturn 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.lengthif(num > 500){this.$message.warning(`粘贴字数超出了长度!请精简字数`);return true;        }else{this.ruleForm.content += String(clip)}//终止},//添加标签进行判断labeladd(val) {const _this = thislet textname = ''let num = 0// 门店名称 : 25个字段   门店地址 :50个字段, 电话:15个字段 if (val == '#{store_name}') {textname = '门店名称'num = _this.textlength + 25} else if (val == '#{store_phone}') {textname = '门店电话'num = _this.textlength + 15} else if (val == '#{store_addr}') {textname = '门店地址'num = _this.textlength + 50}if (num >= 500) {this.$message.warning(`插入${textname}后,总字数超出了常用语长度!请精简常用语的字数,再插入${textname}`);return;} else {_this.changyongyutext += String(val)}},

在这里插入图片描述

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

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

相关文章

计算机网络面试题——第一篇

1. 常见的HTTP状态码有哪些 1xx&#xff1a;信息响应 100 continue&#xff1a; 服务器已经接受请求的初步部分&#xff0c;客户端应继续请求。101 switching protocols&#xff1a;服务器统一切换协议&#xff0c;如从HTTP切换到websocket。 2xx&#xff1a;成功 200 OK&a…

pytest - 多线程提速

import timedef test1_test1():time.sleep(1)assert 1 1, "11"def test1_test2():time.sleep(1)assert 1 1, "11" 上面2个函数&#xff0c;执行情况&#xff1a; 正常执行时&#xff0c;花费 2.08s2个进程执行时&#xff0c;花费 1.18s2个线程执行时&a…

k8s篇之数据挂载类型及区别

一、K8S集群数据挂载类型及区别 在 Kubernetes 中,数据挂载类型主要有以下几种,每种类型适用于不同的场景。以下是主要的挂载类型及其应用场景的详细说明: 1. emptyDir 描述:emptyDir 是一个空目录,其生命周期与 Pod 相同。 它在 Pod 创建时被创建,并在 Pod 删除时被清…

NLP:命名实体识别及案例(Bert微调)

1. 命名实体识别 1.1 序列标注 序列标注(Sequence Labeling)是NLP中最基础的任务之一&#xff0c;其应用十分广泛。它指的是对给定的序列(如文本中的单词或字符)中的每个元素进行标注&#xff0c;以识别出该元素在序列中的特定角色或属性。 1.2 命名实体识别 命名实体识别(Na…

【React】useEffect

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

如何使用ssm实现小区物业管理系统

TOC ssm733小区物业管理系统jsp 第一章 绪论 1.1 研究背景 在现在社会&#xff0c;对于信息处理方面&#xff0c;是有很高的要求的&#xff0c;因为信息的产生是无时无刻的&#xff0c;并且信息产生的数量是呈几何形式的增加&#xff0c;而增加的信息如何存储以及短时间分析…

Quill Editor 富文本编辑器的高度问题

问题现象 1. 编辑框只有一行高&#xff1b; 2. 编辑框高度足够&#xff0c;但显示不全&#xff0c;左侧有滚动条。向下拉滚动条&#xff0c;编辑框把工具栏向上顶出去&#xff0c;工具栏看不见了。 网上搜出来一大堆各种说法&#xff0c;照猫画虎&#xff0c;有时候对&#…

基于微信小程序的美食外卖管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

SPI驱动学习七(SPI_Slave_Mode驱动程序框架)

目录 一、SPI_Slave_Mode驱动程序框架1. Master和Slave模式差别1.1 主设备 (Master)1.2 从设备 (Slave)1.3 示例 2. SPI传输概述2.1 数据组织方式2.2 SPI控制器数据结构 3. SPI Slave Mode数据传输过程4. 如何编写程序4.1 设备树4.2 内核相关4.3 简单的示例代码4.3.1 master和s…

Anaconda虚拟环境默认路径在C盘怎么更改

笔者已经新建好了虚拟环境并且安装了对应库&#xff0c;输入conda env list查询发现虚拟环境竟然安装到了C盘(&#xff61;•́︿•̀&#xff61;)&#xff0c;为避免下一次创建虚拟环境出错&#xff0c;笔者现在修改默认路径置D盘&#xff08;软件安装盘&#xff09; 参考两…

二分——二分查找

题目描述 输入n个不超过109的单调不减的&#xff08;就是后面的数字不小于前面的数字&#xff09;非负整数a1,a2,…,an&#xff0c;然后进行m次询问。对于每次询问&#xff0c;给出一个整数q&#xff0c;要求输出这个数字在序列中第一次出现的编号&#xff0c;如果没有找到的话…

【Oauth2整合gateway网关实现微服务单点登录】

文章目录 一.什么是单点登录&#xff1f;二.Oauth2整合网关实现微服务单点登录三.时序图四.代码实现思路1.基于OAuth2独立一个认证中心服务出来2.网关微服务3产品微服务4.订单微服务5.开始测试单点登录 一.什么是单点登录&#xff1f; 单点登录&#xff08;Single Sign On&…

【YOLO目标检测车牌数据集】共10000张、已标注txt格式、有训练好的yolov5的模型

目录 说明图片示例 说明 数据集格式&#xff1a;YOLO格式 图片数量&#xff1a;10000&#xff08;2000张绿牌、8000张蓝牌&#xff09; 标注数量(txt文件个数)&#xff1a;10000 标注类别数&#xff1a;1 标注类别名称&#xff1a;licence 数据集下载&#xff1a;车牌数据…

小程序-生命周期与WXS脚本

生命周期 什么是生命周期 生命周期&#xff08;Life Cycle&#xff09;是指一个对象从创建 -> 运行 -> 销毁的整个阶段&#xff0c;强调的是一个时间段。 我们可以把每个小程序运行的过程&#xff0c;也概括为生命周期&#xff1a; 小程序的启动&#xff0c;表示生命…

ant design vue中带勾选表格报Tree missing follow keys: ‘undefined‘解决方法

1、这里一定要给columns和data-source设置key即可。 <div><a-table:row-selection"rowSelection":dataSource"tableList":columns"columns":scroll"{ x: 100% }":pagination"false":loading"loading"&g…

配置STM32F103的高级定时器TIM1用于PWM功能

配置STM32F103的高级定时器TIM1用于PWM功能 之前在使用stm32f103的PA9引脚复用为高级定时器TIM1_CH2&#xff0c;用它来输出PWM波时发现无法正常输出PWM波形。出现这种问题的情况一般是将PA9先初始化成了串口&#xff0c;然后又配置成PWM功能&#xff0c;这样会导致无法输出PW…

RestSharp简介

RestSharp是一个轻量级HTTP客户端库&#xff0c;主要功能是通过HTTP对远程资源进行同步异步调用&#xff0c;可将请求主体序列化为JSON或XML并反序列化相应。 请求主体的方式&#xff1a;JSON、XML和表单数据 参数类型&#xff1a;查询、URL段、标头、cookie、正文 官方的例…

C++ -- 异常

C中的异常是用于处理程序执行过程中出现的错误情况。通过异常处理&#xff0c;程序可以在遇到错误时优雅地处理这些问题&#xff0c;而不是直接崩溃。 C语言处理错误的方式 C语言传统的处理错误的方式主要有两种&#xff1a; 终止程序&#xff1a;使用如assert这样的宏来检查…

Chromium 如何禁用自动加载指定路径扩展 c++

之前文章提到过浏览器启动会从[HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Google\Chrome\Extensions\ 注册表下自动搜索需要加载的扩展&#xff0c;那么如何禁用此功能呢&#xff1f; 直接看源码 chrome\browser\extensions\external_registry_loader_win.cc chrome\browser\…

制作 rootfs步骤

1. 准备工作 地平线开发板通过root访问权限&#xff0c; 在开发板中安装所有的依赖库 2. 在开发板创建 rootfs 通过地平线开发板创建一个跟文件系统(rootfs)的方法是通过 chroot 工具将文件系统打包 2.1 挂载必需的文件系统 确保挂载必要的虚拟文件系统&#xff0c;以便正…