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,一经查实,立即删除!

相关文章

【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;而增加的信息如何存储以及短时间分析…

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

作者&#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; 参考两…

【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…

C++ -- 异常

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

隐藏SpringBoot自动生成的文件

第一种方法——删除 第二种方法——Settings——Editor——fail types

idea 创建多模块项目

一、新建项目&#xff0c;创建父工程 新建项目&#xff0c;选择 spring initializr 填写相关信息后提交 删除不相关的目录&#xff0c;如下 修改打包方式为 pom&#xff0c;在 pom.xml 文件中新增一行&#xff0c;如下 二、创建子模块 新增子模块 三、修改 pom 文件 修…

怎样用python+sqlalchemy获得mssql视图对应物理表关系(二)

话不多说 目标:为了实现低代码数据视图对接,有必要得到视图所对应物理表及字段名称,字段类型等 1)约束:视图中用到的物理表不能起别名,所以修改上一篇中存储过程建立语句 USE [agui_conn] GO /****** Object: StoredProcedure [dbo].[sp_GetOrdersByTimestamp] Script D…

04 面部表情识别:Pytorch实现表情识别-表情数据集训练代码

总目录&#xff1a;人脸检测与表情分类 https://blog.csdn.net/whiffeyf/category_12793480.html 目录 0 相关资料1 面部表情识数据集2 模型下载3 训练 0 相关资料 面部表情识别2&#xff1a;Pytorch实现表情识别(含表情识别数据集和训练代码)&#xff1a;https://blog.csdn.n…

vscode配置Eslint后保存出现大量波浪线

解决问题&#xff1a;配置代码格式化 快捷键打开设置&#xff1a;ctrlshiftP 输入&#xff1a; format code 选择&#xff1a;

UE5 项目缓存文件删除、版本控制说明(工程目录结构)

文章目录 前言一、项目文件示例二、缓存文件删除、版本控制说明前言 我们在拷贝项目或者使用 Git 进行版本控制,如果不对文件选择性的控制,大量缓存文件会导致传输速度变慢;或者我们的项目报错了,想要删除缓存文件又不知如何下手,哪些是可删除的,哪些又是不可删除的,本…

SLA(立体光固化成型技术)

01 SLA 3D打印技术简介 SLA工艺简介 SLA是"Stereo lithography Appearance"的缩写&#xff0c;即立体光固化成型法。用特定波长与强度的激光聚焦到光固化材料表面&#xff0c;使之由点到线&#xff0c;由线到面顺序凝固&#xff0c;完成一个层面的绘图作业&#x…

OpenCV图像文件读写(4)解码图像数据函数imdecode()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 从内存缓冲区读取图像。 imdecode 函数从指定的内存缓冲区读取图像。如果缓冲区太短或包含无效数据&#xff0c;函数将返回一个空矩阵 (Mat::dat…

儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程

一、前言 儿童乐园软件下载安装 佳易王游乐场会员扣次管理系统操作教程 软件为绿色免安装版&#xff0c;已经内置数据库&#xff0c;不需再安装数据库文件&#xff0c;软件解压即可。 二、软件程序教程 1、软件可同时管理多个项目&#xff0c;项目设置方法如图&#xff0c;点…

基于微信小程序爱心领养小程序设计与实现(源码+参考文档+定制开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…