VUE3封装EL-ELEMENT-PLUS input组件

VUE3封装EL-ELEMENT-PLUS input组件

完整代码

<template><div><div><div class="lable_top" v-if="label"><label :class="lable_sty">{{ label }}</label></div><el-inputv-model="inputValue"@input="emitInput":clearable="clearables":style="{ width: width }":rows="height":type="textType":class="input_sty":placeholder="placeholder":maxlength="maxlength"/></div></div>
</template><script setup>
import { ref, watch, toRefs } from "vue";
import {btKeyUpSpecChar,isChina,isNumber,isLetterAndNumber,
} from "@/utils/verification";const state = reactive({lable_sty: "lable_sty",input_sty: "input_sty",lable_width: " ",
});const { lable_sty, input_sty, lable_width } = toRefs(state);
const Rulecheck = ref(null);
const clearables = ref();
onMounted(() => {VerifyTextType();lable_width.value = props.lable_width;Rulecheck.value = props.verifyText;// 清除按钮if (props.clearable == "true") {clearables.value = true;} else if (props.clearable == "false") {clearables.value = false;} else {console.log("clearable输入有误:", props.clearable);}
});
const emit = defineEmits(["update:modelValue"]);
let props = defineProps({width: {type: String,default: "200px",},value: {type: String,default: "",},height: {type: Number,default: 1,},label: {type: String,},lable_width: {type: String,default: "100px",},placeholder: {type: String,default: "",},maxlength: {type: Number,default: 15,},verifyText: {type: String,},clearable: {type: String,default: "true",},
});// 高度
const textType = ref("text");
function VerifyTextType() {if (props.height > 1) {textType.value = "textarea";lable_sty.value = "lable_sty1";input_sty.value = "input_sty1";} else {textType.value = "text";lable_sty.value = "lable_sty";input_sty.value = "input_sty";}
}// 监听文本框输入
const inputValue = ref(props.modelValue);
watch(() => props.modelValue,(newValue) => {inputValue.value = newValue;}
);
const emitInput = () => {// 多个正则匹配if (Rulecheck.value) {var multi = Rulecheck.value.split(",");for (let index = 0; index < multi.length; index++) {switch (multi[index]) {case "isLetterAndNumber":inputValue.value = isLetterAndNumber(inputValue.value);break;case "isChina":inputValue.value = isChina(inputValue.value);break;case "isNumber":inputValue.value = isNumber(inputValue.value);break;default:break;}}}inputValue.value = btKeyUpSpecChar(inputValue.value);emit("update:modelValue", inputValue.value);
};
</script><style lang="scss" scoped>
.lable_top {display: inline-block;width: v-bind(lable_width);text-align: right;
}
.lable_sty {font-weight: normal !important;font-size: 14px;color: #606266;display: inline-block;
}
.lable_sty1 {font-weight: normal !important;font-size: 14px;color: #606266;display: inline-block;vertical-align: text-top;
}
.input_sty {margin-left: 10px;
}
.input_sty1 {margin-left: 10px;vertical-align: text-top;
}
</style>

使用

<template><div class="app-container"><general_inpuut v-model="acc" clearable="false" /><general_inpuut label="船舶编码:" v-model="acc" width="500px" /><general_inpuutlabel="测试2:"v-model="acc"width="600px"placeholder="请输入备注"maxlength="100"height="3"verifyText="isNumber"/><el-button @click="btn_change">获取值</el-button></div>
</template><script setup>
const acc = ref();function btn_change() {console.log("acc.value", acc.value);
}
</script>

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

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

相关文章

自动化测试之Selenium

自动化测试Selenium介绍环境搭建如何操作浏览器定位元素css类选择器定位元素xpath定位元素css选择语法xpath选择语法 常用操作添加等待打印信息浏览器更多操作键盘事件鼠标事件特殊场景只选复选框iframe标签下拉框处理弹窗显示上传文件 关闭浏览器切换窗口截图 自动化测试 自动…

JavaSE 认识String类

目录 1 创建字符串2 字符串比较相等3 字符串常量池4 理解字符串不可变5 字符、字节与字符串5.1 字符与字符串5.2 字节与字符串5.3 小结 6 字符串常见操作6.1 字符串比较6.2 字符串查找6.3 字符串替换6.4 字符串拆分6.5 字符串截取6.6 其他操作方法 7 StringBuffer 和 StringBui…

【Linux】文件的描述符和重定向

文件的描述符和重定向 C语言的文件读写操作代码 open系统打开文件方法系统读写文件操作文件描述符文件重定向怎么理解文件缓冲区 C语言的文件读写操作 文件写入 fputs int fputs(const char *s, FILE *stream); s&#xff1a;要写入的字符串 stream&#xff1a;要写入对应的目标…

TCP最大连接数问题总结

最大TCP连接数量限制有&#xff1a;可用端口号数量、文件描述符数量、线程、内存、CPU等。每个TCP连接都需要以下资源&#xff0c;如图所示&#xff1a; 1、可用端口号限制 Q&#xff1a;一台主机可以有多少端口号&#xff1f;端口号与TCP连接&#xff1f;是否能修改&#x…

echarts 之 科技感进度条

1.图片展示 2.代码实现 /* ng qty 进度条 */ <template><div class"ngqty-progress"><div class"ngqty-info"><span>X4</span><span>50%</span></div><div :id"barNgQtyProgress index" c…

Java进阶(7)——手动实现LinkedList 内部node类的实现 增删改查的实现 toString方法 源码的初步理解

目录 引出从ArrayList到Linkedlist手动实现ArrayList从ArrayList到LinkedList 总体设计Node类Node的方法&#xff1a;根据index找node 增删改查的实现增加元素删除元素修改元素查询元素 toString方法完整代码List接口类LinkedList的实现测试类 总结 引出 1.linkedList的节点&am…

从0开始学Python 01

Python学习01 文章目录 Python学习0101-字面量02-注释注释的分类1.单行注释2.多行注释 03-变量04-数据类型1.type()语句 05-数据类型转换常见的转换语句代码演示 06-标识符标识符命名规则1.内容限定&#xff1a;2.大小写敏感&#xff1a;3.不能使用关键字代码示例&#xff1a; …

MySQL Connection not available.

Mysql 报错 最近部署在服务器上的mysql总是报这种错。 但是在服务器上&#xff0c;使用命令行是可以登录进mysq的。 cursor db.cursor() File “/home/ubuntu/miniconda3/envs/chatbot_env/lib/python3.9/site-packages/mysql/connector/connection_cext.py”, line 700, in …

基于JJWT理解JWT,JWS,JWE

JWT &#xff0c; 全写JSON Web Token, 是开放的行业标准RFC7591&#xff0c;用来实现端到端安全验证. 从开发者理解的角度来说&#xff1a; JWT 是一个定义传递信息的标准JWT 的Token是一个Base64编码的字符串&#xff0c; 类似 eyJhbGciOiJIUzI1NyJ9.eyJzdWIiOiJvc2NhciJ9.…

[Python进阶] 类的设计模式

4.11 设计模式 在Python中&#xff0c;类的设计模式是指一种通用的解决方案或设计模板&#xff0c;针对特定的问题或需求构建类结构&#xff0c;并提供相关的方法和属性。这些设计模式可以帮助开发人员遵循最佳实践、提高代码质量、增强可读性、降低维护成本。 需要注意的是&a…

房屋结构健康监测,科技助力让建筑更安全

房屋建筑是人们赖以生存的场所&#xff0c;然而当前我国许多房屋已经达到了使用寿命的中期&#xff0c;房屋的安全系数逐年降低&#xff0c;风险也随着时间的推移而累积。长期以来&#xff0c;我国的房屋普遍存在寿命短、隐患多的问题&#xff0c;“重建设&#xff0c;轻管理”…

探索PDF校对:为何这是现代数字文档的关键步骤

在今日的数字化浪潮中&#xff0c;文档的创建与分享从未如此频繁。尤其是PDF&#xff0c;作为一个普遍接受的标准文件格式&#xff0c;其在企业、学术和日常生活中的应用已经无处不在。但随之而来的挑战是如何确保文档的准确性和专业性。让我们深入探索PDF校对的重要性以及它为…

[国产MCU]-W801开发实例-定时器

定时器 文章目录 定时器1、定时器介绍2、定时器驱动API3、定时器使用示例本文将详细介绍如何使用W801的定时器模块。 1、定时器介绍 W801的定时器包含一个32-bit自动加载的计数器,该计数器由系统时钟经过分频后驱动。 W801有 6路完全独立定时器。实现了精确的定时时间以及中断…

element-ui中的el-table的summary-method(合计)的使用

场景图片&#xff1a; 图片1&#xff1a; 图片2&#xff1a; 一&#xff1a;使用element中的方法 优点&#xff1a; 直接使用summary-method方法&#xff0c;直接&#xff0c;方便 缺点&#xff1a; 只是在表格下面添加了一行&#xff0c;如果想有多行就不行了 1&#xff1a;h…

一、MQ的基本概念

1、初识MQ MQ全称是Message Queue&#xff0c;消息队列&#xff0c;多用于系统之间进行异步通信。队列的概念数据结构中有详细介绍过&#xff0c;先进先出&#xff0c;消息队列就是存储消息的数据结构。 同步调用和异步调用两者之间的区别&#xff1a; 同步调用&#xff1a;发…

opencv-dnn

# utils_words.txt 标签文件 import osimage_types (".jpg", ".jpeg", ".png", ".bmp", ".tif", ".tiff")def list_images(basePath, containsNone):# return the set of files that are validreturn list_file…

gdb 条件断点

条件断点&#xff0c;顾名思义就是有条件才会触发的断点&#xff0c;一般设置此类断点形如&#xff1a;b xxx if xxx&#xff0c;如&#xff1a; 要触发此断点则需要 is_created 0。打完断点我们也可以用 info b 查看一下当前已经设置的断点信息&#xff0c;如&#xff1a; 断…

【JavaSE】接口

文章目录 接口的概念接口的使用接口的特性实现多个接口接口间的继承抽象类和接口的区别 接口的概念 接口就是公共的行为规范标准&#xff0c;大家在实现时&#xff0c;只要符合规范标准&#xff0c;就可以通用。在Java中&#xff0c;接口可以看成是&#xff1a;多个类的公共规…

Spring核心配置步骤-完全基于XML的配置

Spring框架的核心配置涉及多个方面&#xff0c;包括依赖注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;等。以下是一般情况下配置Spring应用程序的核心步骤&#xff1a; 1. **引入Spring依赖&#xff1a;** 在项目的构建工具&#xff08;如Maven、…

23 WEB漏洞-文件上传之解析漏洞编辑器安全

目录 几种中间件解析漏洞简要演示几种常见WEB编辑器简要演示几种常见CMS文件上传简要演示贴近实际应用下的以上知识点演示 各个WEB编辑器安全讲解 https://navisec.it/编辑器漏洞手册/ 各个CMS文件上传简要讲解 wordpress&#xff0c;phpcms&#xff0c; 几种中间件解析漏洞简…