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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
基于javascript编写简单日历
May 02 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 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
超级简单的发送邮件程序
2006/10/09 PHP
?生?D片??C字串
2006/12/06 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Django REST framework视图的用法
2019/01/16 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python字符串查找函数的用法详解
2019/07/08 Python
python操作cfg配置文件方式
2019/12/22 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
法学毕业生自荐信
2013/11/13 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
户外亲子活动总结
2015/05/08 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
php修改word的实例方法
2021/11/17 PHP
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL