好资源导航 » 文章资讯 » vue实现计步器功能

vue实现计步器功能

2023-08-10 00:13:04 84

本文实例为大家分享了vue实现计步器功的具体代码，供大家参考，具体内容如下

1.首先先创建一个Stepper.vue




.counter-component{
position:relative;
display:inline-table;
overflow:hidden;
vertical-align:middle;
}
.counter-show{
float:left;
}
input{
display:inline-block;
border:none;
border-top:1pxsolid#e3e3e3;
border-bottom:1pxsolid#e3e3e3;
height:25px;
line-height:25px;
width:30px;
text-align:center;
outline:none;
text-align:center;
background:#fff;
}
.counter-btn{
border:1pxsolid#e3e3e3;
display:inline-block;
height:25px;
line-height:25px;
width:25px;
text-align:center;
cursor:pointer;
}
.counter-btn:hover{
border-color:#4fc08d;
background:#4fc08d;
color:#fff;
}
.active{
background:rgb(182,181,181);
}

2.然后页面加载

importStepperfrom"./Stepper/Stepper";

data(){
return{
Numbers:1,
maxNumbers:5
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

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

返回顶部
514930285
czq8825@qq.com

vue实现计步器功能

热门推荐

随机推荐