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的MessageBox
Dec 03 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
js 对象是否存在判断
Jul 15 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Javascript中prototype与__proto__的关系详解
Mar 11 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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
Wordpress php 分页代码
2009/10/21 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
什么是Python变量作用域
2020/06/03 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
护理不良事件检讨书
2014/02/06 职场文书
考察现实表现材料
2014/05/19 职场文书
单位委托书格式范本
2014/09/29 职场文书
英文导游词
2015/02/13 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
运动会开幕式主持词
2015/07/01 职场文书
施工现场安全管理制度
2015/08/05 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android