vue实现计步器功能


Posted in Javascript onNovember 01, 2019

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

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

<template>
 <div class="counter-component">
 <div class="counter-btn" @click="mins" :class="{ active: muber==min }">-</div>
 <input type="text" v-model="muber" @keyup="keyUpnumberVal" />
 <div class="counter-btn" @click="adds" :class="{ active: muber==max }">+</div>
 </div>
</template>
<script>
export default {
 name: "Stepper",
 data() {
 return {
 muber: 1
 };
 },
 props: {
 min: {
 type: Number,
 default: 1
 },
 max: {
 type: Number,
 default: 5
 },
 disabled,
 },
 methods: {
 mins() {
 if (this.muber <= this.min) {
 return;
 }
 this.muber--;
 this.$emit("countNumber", this.muber);
 },
 adds() {
 if (this.muber >= this.max) {
 return;
 }
 this.muber++;
 this.$emit("countNumber", this.muber);
 },
 keyUpnumberVal() {
 let numValue;
 if (typeof this.muber === "string") {
 }
 this.$emit("countNumber", this.muber);
 }
 }
};
</script>
<style lang="less" scoped>
.counter-component {
 position: relative;
 display: inline-table;
 overflow: hidden;
 vertical-align: middle;
}
.counter-show {
 float: left;
}
input {
 display: inline-block;
 border: none;
 border-top: 1px solid #e3e3e3;
 border-bottom: 1px solid #e3e3e3;
 height: 25px;
 line-height: 25px;
 width: 30px;
 text-align: center;
 outline: none;
 text-align: center;
 background: #fff;
}
.counter-btn {
 border: 1px solid #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);
}
</style>

2.然后页面加载

import Stepper from "./Stepper/Stepper";
<Stepper :min="Numbers" :max="maxNumbers" @countNumber="getFeslaves('countNumber',$event)"></Stepper>
data(){
return {
Numbers: 1,
maxNumbers: 5
}
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
Jul 14 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
解决Vue-cli无法编译es6的问题
Oct 30 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
vue-router 中 meta的用法详解
Nov 01 #Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 #Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 #Javascript
You might like
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python实现百度关键词排名查询
2014/03/30 Python
Python中Collection的使用小技巧
2014/08/18 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python实现简单坦克大战
2020/03/27 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
公益活动邀请函
2014/02/05 职场文书
成绩单评语
2015/01/04 职场文书
意向协议书
2015/01/27 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
解析目标检测之IoU
2021/06/26 Python