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 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
两个Javascript小tip资料
Nov 23 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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程序总是提示验证码输入有误解决方案
2015/01/07 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
php截取视频指定帧为图片
2016/05/16 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php session的应用详细介绍
2017/03/22 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
javascript读取xml
2006/11/04 Javascript
学习YUI.Ext 第二天
2007/03/10 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
Move.js入门
2017/02/08 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Django验证码的生成与使用示例
2017/05/20 Python
python数据归一化及三种方法详解
2019/08/06 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
应届护士推荐信
2013/11/16 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
会计专业自荐信
2014/06/03 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
财务经理岗位职责
2015/01/31 职场文书
会计岗位职责范本
2015/04/02 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP