Vue数字输入框组件示例代码详解

2023-08-03 02:31:04 345

数字输入框组件

实现功能：只允许输入数字(包括小数)、允许设置初始值、最大值、最小值。

为了方便，这里选用Vue的cli-service

实现快速原型开发

首先template部分代码

这部分没有什么特别说明的，分别传入value、max、min作为子组件的原始值最大值和最小值。在子组件中用props接收，独立组件，对每个传入的prop进行类型验证

主要JS部分代码

在这里不能使用字符串的方式定义组件模板，所以使用render()函数的方式

render(cr){
let_this=this
returncr('div',{'class':'input-number'},[
cr('button',{'class':{'down-btn':true,'dis':this.currentValue<=this.min},on:{click:_this.handleDown},},['-']),
cr('input',{'class':'change-input',domProps:{value:_this.currentValue},on:{change:_this.handleChange}}),
cr('button',{'class':{'down-btn':true,'dis':this.currentValue>=this.max},on:{click:_this.handleUp},},['+']),
])
}

定义watch和methods

watch:{
value(val){
this.updateValue(val)
},
currentValue(val){
this.$emit('input',val)
this.$emit('on-change',val)
}
},
methods:{
updateValue(val){
if(val>this.max)val=this.max
if(val=this.max)return
this.currentValue+=1
},
handleChange(ev){
letval=ev.target.value.trim()
letmax=this.max
letmin=this.min
if(this.isValueNumber(val)){
val=Number(val)
this.currentValue=val
if(val>max){
this.currentValue=max
}elseif(val
最后是Less部分代码

*{
box-sizing:border-box;
}
.demo{
width:200px;
margin:0auto;
}
.input-number{
width:100%;
display:flex;
height:40px;
align-items:center;
justify-content:space-between;
.down-btn,.up-btn{
font-size:18px;
width:40px;
height:40px;
background-color:#f5f7fa;
color:#606266;
border:1pxsolid#dcdfe6;
border-radius:4px004px;
cursor:pointer;
outline:none;
&.up-btn{
border-radius:04px4px0;
}
&.dis{
cursor:not-allowed;
}
}
.change-input{
flex:1;
max-width:100px;
outline:none;
border:none;
text-align:center;
height:40px;
}
}

总结
以上所述是小编给大家介绍的Vue数字输入框组件示例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue数字输入框组件示例代码详解

热门推荐

随机推荐