当前位置: 首页 > news >正文

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>

相关文章:

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&…...

RISC-V公测平台发布 · 在SG2042上配置Jupiter+Octave科学计算环境

简介 JupyterHub是一个开源的共享计算平台&#xff0c;它为每个用户管理一个单独的 Jupyter 环境&#xff0c; 可以用于学生班级、企业数据科学小组或科学研究小组。它是一个多用户中心&#xff0c;可以生成、管理和代理多个单用户Jupyter笔记本服务器的实例。 GNU Octave是一…...

初识Sentinel

目录 1.解决雪崩的方式有4种&#xff1a; 1.1.2超时处理&#xff1a; 1.1.3仓壁模式 1.1.4.断路器 1.1.5.限流 1.1.6.总结 1.2.服务保护技术对比 1.3.Sentinel介绍和安装 1.3.1.初识Sentinel 1.3.2.安装Sentinel 1.4.微服务整合Sentinel 2.流量控制 2.1.簇点链路 …...

【官方中文文档】Mybatis-Spring #注入映射器

注入映射器 与其在数据访问对象&#xff08;DAO&#xff09;中手工编写使用 SqlSessionDaoSupport 或 SqlSessionTemplate 的代码&#xff0c;还不如让 Mybatis-Spring 为你创建一个线程安全的映射器&#xff0c;这样你就可以直接注入到其它的 bean 中了&#xff1a; <bea…...

UG\NX 二次开发 相切面、相邻面的选择控件

文章作者:里海 来源网站:https://blog.csdn.net/WangPaiFeiXingYuan 简介: 有群友问“UFUN多选功能过滤面不能选择相切面或相邻面之类的吗?” 这个用Block UI的"面收集器"就可以,ufun函数是不行的。 效果: C++语言在UG二次开发中的应用及综合分析 C++ …...

Quartz任务调度框架介绍和使用

一、Quartz介绍 Quartz [kwɔːts] 是OpenSymphony开源组织在Job scheduling领域又一个开源项目&#xff0c;完全由Java开发&#xff0c;可以用来执行定时任务&#xff0c;类似于java.util.Timer。但是相较于Timer&#xff0c; Quartz增加了很多功能&#xff1a; 1.持久性作业 …...

drools8尝试

drools7升级到drools8有很大很大的变更.几乎不能说是一个项目了. 或者说就是名字相同的不同项目, 初看下来变化是这样 两个最关键的东西都retired了 https://docs.drools.org/8.42.0.Final/drools-docs/drools/migration-guide/index.html business central变成了一个VS code…...

【机器学习】python基础实现线性回归

手写梯度下降的实现ykxb的线性回归 算法步骤&#xff1a; &#xff08;1&#xff09;构造数据&#xff0c;y3*x5; &#xff08;2&#xff09;随机初始化和&#xff0c;任意数值&#xff0c;例如9,10; &#xff08;3&#xff09;计算&#xff0c;,并计算 &#xff08;4&…...

vue table合并行 动态列名

需求: 1.合并行,相同数据合并 2,根据后端返回数据动态显示列名, 我这个业务需求是,每年增加一列,也就是列名不是固定的,后端返回数据每年会多一条数据,根据返回数据显示列名 实现: html <el-table v-loading"loading" :data"dataList" :span-metho…...

Spring Cloud Alibaba-Nacos Discovery--服务治理

1 服务治理介绍 先来思考一个问题 通过上一章的操作&#xff0c;我们已经可以实现微服务之间的调用。但是我们把服务提供者的网络地址 &#xff08;ip&#xff0c;端口&#xff09;等硬编码到了代码中&#xff0c;这种做法存在许多问题&#xff1a; 一旦服务提供者地址变化&am…...

【C++】unordered_map和unordered_set的使用 及 OJ练习

文章目录 前言1. unordered系列关联式容器2. map、set系列容器和unordered_map、unordered_set系列容器的区别3. unordered_map和unordered_set的使用4. set与unordered_set性能对比5. OJ练习5.1 在长度 2N 的数组中找出重复 N 次的元素思路分析AC代码 5.2 两个数组的交集思路分…...

初识 JVM 01

JVM JRE JDK的关系 JVM 的内存机构 程序计数器 java指令的执行流程&#xff1a; 1 右侧的java源代码编译为左侧的java字节码&#xff08;右侧第一个方块对应左侧第一个方块&#xff09; 2 字节码 经过解释器 变为机器码 3 机器码就可以被cpu来执行 程序计数器的作用就…...

FPGA应用学习笔记----I2S和总结

时序一致在慢时序方便得多 增加了时序分布和分析的复杂性 使用fifo会开销大量资源...

归并排序之从微观看递归

前言 这次&#xff0c;并不是具体讨论归并排序算法&#xff0c;而是利用归并排序算法&#xff0c;探讨一下递归。归并排序的特点在于连续使用了两次递归调用&#xff0c;这次我们将从微观上观察递归全过程&#xff0c;从本质上理解递归&#xff0c;如果能看完&#xff0c;你一…...

Pytorch-day07-模型保存与读取

PyTorch 模型保存&读取 模型存储模型单卡存储&多卡存储模型单卡读取&多卡读取 1、模型存储 PyTorch存储模型主要采用pkl&#xff0c;pt&#xff0c;pth三种格式,就使用层面来说没有区别PyTorch模型主要包含两个部分&#xff1a;模型结构和权重。其中模型是继承n…...

【C语言每日一题】01. Hello, World!

题目来源&#xff1a;http://noi.openjudge.cn/ch0101/01/ 01. Hello, World! 总时间限制: 1000ms 内存限制: 65536kB 问题描述 对于大部分编程语言来说&#xff0c;编写一个能够输出“Hello, World!”的程序往往是最基本、最简单的。因此&#xff0c;这个程序常常作为一个初…...

arm: day8

1.中断实验&#xff1a;按键控制led灯 流程&#xff1a; key.h /*************************************************************************> File Name: include/key.h> Created Time: 2023年08月21日 星期一 17时03分20秒***************************************…...

k8s容器加入host解析字段

一、通过edit或path来修改 kubectl edit deploy /xxxxx. x-n cattle-system xxxxx为你的资源对象名称 二、添加字段 三、code hostAliases:- hostnames:- www.rancher.localip: 10.10.2.180...

浅谈开发过程中完善的注释的重要性

第一部分&#xff1a;引言 1.1 简述编程注释的定义和功能 编程注释是一种在源代码中添加的辅助性文字&#xff0c;它不参与编译或执行&#xff0c;但对于理解源代码起着至关重要的作用。注释可以简单地描述代码的功能&#xff0c;也可以详细地解释算法的工作原理、设计决策的…...

Docker 微服务实战

1. 通过IDEA新建一个普通微服务模块 1.1 建Module docker_boot 1.2 改写pom <?xml version"1.0" encoding"UTF-8"?><project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&…...

Ubuntu 24.04 环境实战:ROS 2 Kilted 实现 SLAM 建图与 Nav2 导航

一、构建地图 1、安装依赖 安装 slam_toolbox 算法库&#xff1a; sudo apt install ros-kilted-slam-toolbox安装 TurtleBot3 全套支持包&#xff1a; sudo apt install ros-kilted-turtlebot3*2、使用清华源 如果apt安装很慢&#xff0c;请先配置清华源&#xff1a; sud…...

360CDN 全系列产品体验:CDN / 高防 / SDK 游戏盾横向测评

作为深耕互联网技术领域多年的开发者&#xff0c;平时无论是个人项目还是公司业务&#xff0c;都经常需要用到CDN加速、网络防护类产品。近期正好完整上手测试了360CDN全系列核心产品&#xff0c;涵盖基础CDN加速、高防CDN、SDK游戏盾三款&#xff0c;全程以真实业务场景为测试…...

从‘深度学习之美’到TensorFlow 2.9:一个MNIST手写识别项目的实战重构记

1. 当经典教材遇上TensorFlow 2.9&#xff1a;我的MNIST重构历险记 记得第一次翻开《深度学习之美》这本书时&#xff0c;我被其中用TensorFlow实现MNIST手写识别的案例深深吸引。但当我兴冲冲打开电脑准备复现时&#xff0c;却发现书中的TensorFlow 1.x代码在2.9环境下几乎寸步…...

别再只用Cesium了!Three.js + Cesium 1.8 整合实战:从零搞定天地图中文底图与BIM模型加载

Three.js与Cesium 1.8深度整合实战&#xff1a;天地图中文底图与BIM模型加载全解析 当我们需要在三维地理信息系统中同时展示宏观地理环境和精细建筑内部结构时&#xff0c;单独使用Cesium或Three.js往往难以完美兼顾。本文将带你完成一次技术栈的深度整合&#xff0c;解决国内…...

路径跟踪惩罚

基于动力学模型MPC的加入规划层的轨迹跟踪避障控制&#xff08;优化过的&#xff0c;效果比书本的好&#xff09;半夜调试控制器的时候&#xff0c;突然发现传统轨迹跟踪像极了直男开车——死盯目标点不管周围环境。这周给移动机器人怼了个混合架构&#xff0c;把全局规划直接喂…...

为什么你的MoveIt2 Python API总报错?ROS2环境变量与PYTHONPATH的隐藏陷阱

为什么你的MoveIt2 Python API总报错&#xff1f;ROS2环境变量与PYTHONPATH的隐藏陷阱 当你第一次在ROS2中尝试使用MoveIt2的Python API时&#xff0c;那种"ModuleNotFoundError: No module named moveit"的报错信息可能会让你抓狂。这不是因为你做错了什么&#xff…...

OmenSuperHub:惠普游戏本性能控制终极指南 - 开源替代方案全面解析

OmenSuperHub&#xff1a;惠普游戏本性能控制终极指南 - 开源替代方案全面解析 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub 还在为惠普Omen Gaming Hub的臃肿体积和隐私担忧而烦恼吗&#xff1f;OmenSuperHub为你提供了一…...

Qt安卓开发实战:从红米K60调试到多机型适配指南

1. Qt安卓开发环境准备 搞Qt安卓开发&#xff0c;首先得把环境搭好。这里假设你已经按照官方文档或者教程配置好了Qt Creator和Android SDK/NDK。如果还没搞定&#xff0c;建议先去Qt官网把Android开发套件下载齐全&#xff0c;包括&#xff1a; Qt for Android&#xff08;建议…...

5个创新方法:基于开源工具的内容访问优化方案

5个创新方法&#xff1a;基于开源工具的内容访问优化方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;合法访问优质内容成为信息获取的关键挑战。…...

低成本搭建OpenClaw智能体:星图Qwen3-VL:30B镜像+飞书实战

低成本搭建OpenClaw智能体&#xff1a;星图Qwen3-VL:30B镜像飞书实战 1. 为什么选择本地部署OpenClaw 去年夏天&#xff0c;我接手了一个内容运营的兼职项目&#xff0c;需要每天从几十个信息源收集素材、整理成报告。最初尝试用ChatGPT Plus的API自动化处理&#xff0c;但两…...