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

elementui写一个自定义的rangeInput的组件

组件定义

  • 使用el-row确保元素都在一行上
  • 对外暴露的prop是minValue和maxValue,但是不建议直接使用,使用计算属性minValueComputed和maxValueComputed
  • 更改计算属性的值的不要直接更改计算属性,也不要直接更改原本的prop,通知外层的父组件来更改,通过父组件将变动传递到子组件中
  • 子组件使用prop进行属性传递的时候,应该极力避免在子组件中直接更改prop的值,获取属性值使用计算属性进行v-model绑定,不要直接绑定在prop上,因为v-model的数据流是双向的。修改值的话,监听计算属性的setter方法,当变化的时候,通知父组件键更改外部的prop的传递值
<template><el-row><el-col :span="10"><el-inputtype="number"v-model="minValueComputed":placeholder="minPlaceholder"size="mini"class="rangeInput"@input="minValueComputed = handleInput(minValueComputed)"/></el-col><el-col :span="4"><span style="text-align: center; display: block; margin-left: 5px"></span></el-col><el-col :span="10"><el-inputtype="number"v-model="maxValueComputed":placeholder="maxPlaceholder"size="mini"class="rangeInput"@input="maxValueComputed = handleInput(maxValueComputed)"/></el-col></el-row>
</template><script>
export default {name: 'RangeInput',props: {minValue: String||Number,maxValue: String||Number,minPlaceholder: String,maxPlaceholder: String,cleanFlag: Boolean},data() {return {internalMinValue: this.minValue,internalMaxValue: this.maxValue,minErrorMsg: ''}},computed: {minValueComputed: {get() {return this.internalMinValue;},set(value) {this.internalMinValue = value;this.$emit('update:minValue', value);}},maxValueComputed: {get() {return this.internalMaxValue;},set(value) {this.internalMaxValue = value;this.$emit('update:maxValue', value);}}},methods: {handleInput(value) {return value.replace(/[^\d|\.|-]/g, '');},},watch: {cleanFlag() {this.minValueComputed = '';this.maxValueComputed = '';}}
}
</script><style scoped lang="scss">
::v-deep .rangeInput .el-input__inner{width: 70px !important;height: 30px !important;
}</style><style scoped>
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {-webkit-appearance: none;
}
/deep/ input[type="number"] {-moz-appearance: textfield;
}
/deep/ inpit {border: none
}
</style>

使用

给外围的el-form中加上一个inline-block,最大值和最小值不在同一行的情况

<el-form-item label="损耗比率(%)" prop="wastageRate" ><range-input:minValue.sync="wastageRateMin":maxValue.sync="wastageRateMax"minPlaceholder="最小值"maxPlaceholder="最大值":cleanFlag="rankInputCleanFlag"/>
</el-form-item>

相关文章:

elementui写一个自定义的rangeInput的组件

组件定义 使用el-row确保元素都在一行上对外暴露的prop是minValue和maxValue&#xff0c;但是不建议直接使用&#xff0c;使用计算属性minValueComputed和maxValueComputed更改计算属性的值的不要直接更改计算属性&#xff0c;也不要直接更改原本的prop&#xff0c;通知外层的父…...

护眼灯哪些牌子好?一文刨析护眼灯怎么选择!

护眼灯哪些牌子好&#xff1f;护眼台灯作为对抗视力挑战的一种方法&#xff0c;逐渐赢得了众多家长的青睐。这些台灯利用尖端光学技术&#xff0c;发出柔和且无刺激的照明&#xff0c;有助于保护眼睛不受伤害。它们不但可以调节亮度和色温&#xff0c;打造一个舒适且自然的阅读…...

抖音短剧看剧系统是怎么做的?怎么样搭建上线运营?

前言&#xff1a; 当前热门短剧已深入大家的日常&#xff0c;针对一些好的短剧更是吸金无数。今天给大家介绍一下短剧这个项目整个运作模式。 一、一部短剧是怎么样呈现到观众眼前的&#xff1f; 首先影视作品公司拍摄剪辑好短剧 &#xff0c;弄好一切审核后&#xff0c;放到…...

2024.06.06校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流*裙 &#xff0c;内推/实习/校招汇总表格 1、校招 | 追觅科技2025届校园招聘/正式启动&#xff01; 校招 | 追觅科技2025届校园招聘正式启动&#xff01; 2、校招&实习&社招 | 博世海外招聘—德国/专场正式启动&#xff0…...

神经网络模型---ResNet

一、ResNet 1.导入包 import tensorflow as tf from tensorflow.keras import layers, models, datasets, optimizersoptimizers是用于更新模型参数以最小化损失函数的算法 2.加载数据集、归一化、转为独热编码的内容一致 3.增加颜色通道 train_images train_images[...,…...

Linux之网络编程

Linux之网络编程 TCP协议 TCP(Transmission ControlProtocol) : 传输控制协议&#xff0c;是一个 面向连接的、可靠的、基于字节流的传输层的协议。TCP 协议建立的是一种点到点的&#xff0c;一对一的可靠连接协议 特点&#xff1a; 数据无丢失数据无失序数据无错误数据无重…...

opencascade AIS_InteractiveContext源码学习1

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…...

TIA博途 WinCC下载到面板时,提示错误消息:“装载过程终止由于传输错误:8020AB001A06FFF4!”的解决办法

TIA博途 WinCC下载到面板时,提示错误消息:“装载过程终止由于传输错误:8020AB001A06FFF4!”的解决办法 这个错误信息是由于缺少设备镜像无法下载到操作面板而导致的。 当使用 TIA V15.1 Update 4 和 Update 5 组态 TP1000F Mobile 时,请遵守特别注意事项。 问题 在编译一个…...

【MySQL】聊聊数据库是如何保证数据不丢的

对于一个存储系统来说&#xff0c;其中比较关键的核心组件包含&#xff0c;网络、存储模型、持久化、数据结构等。而数据如何保证不丢失&#xff0c;对于不同的存储系统来说&#xff0c;比如Redis采用AOF和RDB的方式进行混合使用&#xff0c;而MySQL采用日志进行保证。也就是re…...

GitLab教程(四):分支(branch)和合并(merge)

文章目录 1.分支&#xff08;branch&#xff09;&#xff08;1&#xff09;分支的概念&#xff08;2&#xff09;branch命令 2.合并&#xff08;merge&#xff09;&#xff08;1&#xff09;三个命令pullfetchmergegit fetchgit mergegit pull &#xff08;2&#xff09;合并冲…...

2021数学建模A题目–“FAST”主动反射面的形状调节

A 题——“FAST”主动反射面的形状调节 思路&#xff1a;该题主要是通过利用伸缩杆调整FAST反射面&#xff0c;给出合适的调整方案 程序获取 第一题问题思路与结果&#xff1a; 当待观测天体S位于基准球面正上方&#xff0c;结合考虑反射面板调节因素&#xff0c;确定理想抛物…...

华为---- RIP路由协议基本配置

08、RIP 8.1 RIP路由协议基本配置 8.1.1 原理概述 RIP(Routing Information Protocol,路由协议)作为最早的距离矢量IP路由协议&#xff0c;也是最先得到广泛使用的一种路由协议&#xff0c;采用了Bellman-Ford算法&#xff0c;其最大的特点就是配置简单。 RIP协议要求网络中…...

Android studio在Ubuntu桌面上 创建桌面图标,以及导航栏图标

Android studio在Ubuntu桌面上 创建桌面图标&#xff0c;以及导航栏图标 1. 下载Android studio for Lunux 免安装版本之后&#xff0c;解压 2. 通过控制台运行 ~/Documents/android-studio-2024.1.1.2-linux/android-studio/bin$ ./studio.sh 3. 选择菜单&#xff0c;Tools…...

JAVA云HIS医院管理系统源码 云HIS系统的应用场景

JAVA云HIS医院管理系统源码 云HIS系统的应用场景 云HIS是针对中小医疗健康机构推出的一套基于云端的诊所云HIS服务平台&#xff0c;包括内部管理系统、临床辅助决策系统、体检系统、客户管理与服务系统、健康管理系统、知识管理系统、医患沟通系统、线上营销系统、其他外部系…...

Handler机制

目录 一、简介二、相关概念解释2.1 Message&#xff08;消息&#xff09;2.2 Handler&#xff08;处理器&#xff09;2.2.1 Handler的构造方法2.2.2 Handler sendMessage&#xff08;&#xff09;相关的方法2.2.3 Handler dispatchMessage&#xff08;&#xff09;方法 2.3 Mes…...

鸿蒙实现金刚区效果

前言&#xff1a; DevEco Studio版本&#xff1a;4.0.0.600 所谓“金刚区"是位于APP功能入口的导航区域&#xff0c;通常以“图标文字”的宫格导航的形式出现。之所以叫“金刚区”&#xff0c;是因为该区域会随着业务目标的改变&#xff0c;展示不同的功能图标&#xff…...

Ubuntu 查看设备温度

要在Ubuntu中查看设备的温度&#xff0c;可以使用一些命令行工具来获取系统硬件的温度信息。下面列出了几种常用的方法&#xff1a; 方法 1: 使用 sensors 命令 sensors 命令用于读取和显示系统中的传感器数据&#xff0c;包括CPU温度和其他硬件传感器的信息。首先需要安装 l…...

大型网站优化指南:打造流畅的在线体验

大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力&#xff0c;并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求&#xff0c;通过渐进式的发展策略运营成大型…...

Redis变慢了?

Redis变慢了&#xff1f; 什么是Redis&#xff1f;测定Redis变慢&#xff1f;最大响应延迟平均响应延迟设置Redis慢日志 分析Redis变慢bigkeysbigkey的危害bigkey优化 写在最后 什么是Redis&#xff1f; 作为一个技术人员来说&#xff0c;大家用的最多的可能就是Redis了&#…...

11.6.k8s实战-节点扩缩容

目录 一&#xff0c;需求描述 二、集群缩容-节点下线 1&#xff0c;节点下线案例说明 2&#xff0c;查看现有节点 3&#xff0c;查看所有名称空间下的pod ​编辑4&#xff0c;驱逐下线节点的pod 5&#xff0c;驱逐后再次查看pod 6&#xff0c;驱逐pod后再次查看节点信息…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...