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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
javascript函数特点实例分析
May 14 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
react 生命周期实例分析
May 18 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
利用python程序生成word和PDF文档的方法
2017/02/14 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
利用python求积分的实例
2019/07/03 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
广告学专业求职信
2014/06/19 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
工程服务质量承诺书
2015/04/29 职场文书
《海上日出》教学反思
2016/02/23 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python