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},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, '');},},
}
</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" style="display: inline-block;"><range-input:minValue.sync="wastageRateMin":maxValue.sync="wastageRateMax"minPlaceholder="最小值"maxPlaceholder="最大值"/></el-form-item>

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

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

相关文章

网络命令大全windows linux

涉及到网络命令时&#xff0c;以下是一些常用的命令和它们的作用&#xff0c;这些命令可以在Windows命令提示符或者Unix/Linux终端中使用。这些命令有助于管理网络连接、解决网络问题以及进行网络诊断。 Windows 命令 ipconfig 显示本地计算机的网络配置信息&#xff0c;包括I…

Aeron:Common Errors

Aeron 遇到的大多数问题通常都是由于资源问题造成的&#xff0c;如 CPU 资源不足、磁盘 I/O 速度慢、内存分页等。Linux 提供了许多工具来帮助诊断这些问题&#xff0c;其中一些工具将在 Aeron Troubleshooting 部分进行介绍。 一、Aeron timeouts Media Driver Timeout Medi…

6.深度卷积神经网络

目录 1.深度卷积神经网络ALexNet 2012AlexNetAlexNet架构AlexNet与LeNet复杂度对比总结代码实现2.使用块的网络VGG 2014 image竞猜第二VGG架构进度总结代码实现3.网络中的网络NiN全连接层的问题NiN块NiN架构总结代码实现4.含并行连结的网络(GoogLeNet)2014 image竞猜第一最好…

总结CSS 实现新手引导效果的六种方式

前言 我们在平常做业务中&#xff0c;在功能变更&#xff0c;或者有大的改动时&#xff0c;经常会用到新手引导功能&#xff0c; 虽然有很多库可以使用&#xff0c; 但是有时候很简单的需求&#xff0c;没必要引入库&#xff0c; 本文用最简化代码&#xff0c;实现一下新手引导…

这些常用 MySQL 用法,99% 的人都不知道!

本文首发于公众平台&#xff1a;腐烂的橘子 MySQL 对于后端程序员来讲是最熟悉不过了&#xff0c;不过 MySQL 有一些基本用法&#xff0c;99% 的人都不知道&#xff0c;考验技术基本功的时候到了&#xff0c;快来看看有没有你不知道的&#xff1a; select select 0,2,3,4; 会…

大数据开发语言Scala(一) - Scala入门

引言 在当今的大数据时代&#xff0c;数据量和数据处理的复杂性不断增加&#xff0c;传统的编程语言已经难以满足需求。Scala作为一门新兴的编程语言&#xff0c;以其简洁、强大和高效的特性&#xff0c;迅速成为大数据开发的热门选择。本文将详细介绍Scala语言的基础知识&…

react中useEffect函数的详细用法

1、函数介绍 useEffect 是 React 中的一个 Hook&#xff0c;用于在函数组件中处理副作用&#xff08;如数据获取、订阅、手动更改 DOM 等&#xff09;。与类组件中的生命周期方法&#xff08;如 componentDidMount、componentDidUpdate 和 componentWillUnmount&#xff09;类…

Java面试题之MySQL事务详解

事务是什么 MySQL中的事务&#xff08;Transaction&#xff09;是数据库管理系统执行的一个逻辑操作单元&#xff0c;它是由一系列数据库操作组成的逻辑工作单元。事务是并发控制的单位&#xff0c;也是用户定义的一个操作序列。事务的主要目的是确保数据的完整性和一致性&…

new char(20)和new char[20]区别

这两个语句都是用于动态分配内存并返回指向该内存的指针&#xff0c;但它们之间有一些重要的区别。 char* p new char(20);: 这条语句分配了一个char类型的内存块&#xff0c;只包含一个元素&#xff0c;其值初始化为20。这意味着p是一个指向包含单个char值的内存块的指针。在…

JAVA小知识23:set与HashSet

一、Set 1.1、Set的基本知识 set也是单列集合的一种&#xff0c;用于存储一组不重复的元素。它是一种集合数据类型&#xff0c;常用于需要确保元素唯一性和快速查找的场景。他有如下特点&#xff1a; 无序性&#xff1a;Set 中的元素是无序的&#xff0c;没有特定的顺序。唯…

【JVM】类的⽣命周期和类加载的过程

在Java中&#xff0c;类的生命周期和类加载过程是Java虚拟机&#xff08;JVM&#xff09;管理的核心部分。类的生命周期包括从类被加载到内存直到类被卸载的整个过程。类加载过程可以细分为多个阶段&#xff1a;加载、链接&#xff08;包括验证、准备、解析&#xff09;、初始化…

代码签名证书申请指南

申请代码签名证书的具体流程可以归纳为以下几个步骤&#xff1a; 1、确定证书类型&#xff1a; 根据您的需求选择合适的代码签名证书类型。常见的有OV&#xff08;Organization Validation&#xff0c;组织验证&#xff09;代码签名证书和EV&#xff08;Extended Validation&am…

Elasticsearch-ES查询单字段去重

ES 语句 整体数据 GET wkl_test/_search {"query": {"match_all": {}} }结果&#xff1a; {"took" : 123,"timed_out" : false,"_shards" : {"total" : 1,"successful" : 1,"skipped" : 0…

R语言自定义vlookup函数

############################################################## #######自定义函数integrate_and_match_values用于提取数据 ############################################################# integrate_and_match_values <- function(target_data,target_id_col,target_…

(一)Kafka 安全之使用 SSL 的加密和身份验证

目录 一. 前言 二. 使用 SSL 的加密和身份验证 2.1. 为每个 Kafka Broker 生成 SSL 密钥和证书 2.1.1. 主机名验证&#xff08;Host Name Verification&#xff09; 2.1.2. 注意&#xff08;Note&#xff09; 一. 前言 SSL&#xff08;Secure Sockets Layer&#xff09;是…

Oracle数据库面试题-14

81. 解释RAC&#xff08;Real Application Clusters&#xff09;的工作原理。 RAC&#xff08;Real Application Clusters&#xff09;是Oracle Corporation开发的高可用性解决方案&#xff0c;它允许用户将多个数据库实例集群在一起&#xff0c;以提高数据库系统的可用性和性…

【Java】已解决java.lang.IllegalAccessException异常

文章目录 一、问题分析背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决java.lang.IllegalAccessException异常 一、问题分析背景 在Java开发中&#xff0c;java.lang.IllegalAccessException是一个常见的运行时异常&#xff0c;它通常发生在尝试…

【人工智能】人工智能就业岗位发展方向有哪些?

人工智能领域的岗位多样&#xff0c;涵盖了从技术研发到应用实施、从产品设计到市场运营等各个方面&#xff0c;以下是人工智能就业岗位的主要发展方向 研发与应用岗位&#xff1a; 机器学习工程师&#xff1a;负责开发和实施机器学习算法&#xff0c;解决各种问题&#xff0c…

CDA二级(Level II)数据分析师——考试内容梳理二

逻辑回归&#xff1a;Ln(P/(1-P)-30.06X0.05X2-0.02X3X1 岭回归的扰动性越大&#xff0c;模型越不容易受到共线性的影响&#xff1b; LOSSO只是缓解了由于共线性导致的估计误差的问题&#xff0c;而不是解决共线性 &#xff1b; AUC值接近0.5时&#xff0c;我们认为这个模型…

ARM32开发--FreeRTOS-事件组

系列文章目录 知不足而奋进 望远山而前行 目录 系列文章目录 文章目录 前言 目标 内容 概念 事件标志位 开发流程 功能介绍 创建事件组 触发事件 等待事件触发 同步 清理事件 案例 总结 前言 在嵌入式系统开发中&#xff0c;任务之间的同步和通信是至关重要的…