Vue.js数字输入框组件使用方法详解


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下

效果

Vue.js数字输入框组件使用方法详解

入口页 index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>数字输入框组件</title>
</head>
<body>
 <div id="app">
  <input-number v-model="value" :max="10" :min="0"></input-number>
 </div>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
 <script src="input-number.js"></script>
 <script src="index.js"></script>
</body>
</html>

数字输入框组件 input-number.js

function isValueNumber(value) {
 return (/(^-?[0-9]+\.{1}\d+$) | (^-?[1-9][0-9]*$) | (^-?0{1}$)/).test(value + '');
}


Vue.component('input-number',{
 template: '\
  <div class="input-number">\
   <input \
    type="text"\
    :value="currentValue"\
    @change="handleChange">\
   <button \
    @click="handleDown"\
    :disabled="currentValue <= min">-</button>\
   <button \
    @click="handleUp"\
    :disabled="currentValue >= max">+</button>\
  </div>',
 props: {
  max: {
   type: Number,
   default: Infinity
  },
  min: {
   type: Number,
   default: -Infinity
  },
  value: {
   type: Number,
   default: 0
  }
 },
 data: function () {
  return {
   currentValue: this.value
  }
 },
 watch: {
  currentValue: function (val) {
   this.$emit('input', val);
   this.$emit('on-change',val);
  },
  value: function (val) {
   this.updateValue(val);
  }
 },
 methods: {
  updateValue: function (val) {
   if(val > this.max)
    val = this.max;
   if(val < this.min)
    val = this.min;
   this.currentValue = val;
  },
  handleDown: function () {
   if(this.currentVaule <= this.min)
    return;
   this.currentValue -= 1;
  },
  handleUp: function () {
   if(this.currentVaule >= this.max)
    return;
   this.currentValue += 1;
  },
  handleChange: function (event) {
   var val = event.target.value.trim();

   var max = this.max;
   var min = this.min;

   if(isValueNumber(val)){
    val = Number(val);
    this.currentValue = val;

    if(val > max){
     this.currentValue = max;
    }else if(val < min){
     this.currentValue = min;
    }
   }else{
    event.target.value = this.currentValue;
   }
  }
 },
 mounted: function () {
  this.updateValue(this.value);
 }
});

根实例

var app = new Vue({
 el: '#app',
 data: {
  value: 5
 }
});

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
详解angular element()方法使用
Apr 08 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
Vue.js组件通信之自定义事件详解
Oct 19 #Javascript
Vue.js自定义指令学习使用详解
Oct 19 #Javascript
Vue.js标签页组件使用方法详解
Oct 19 #Javascript
基于JavaScript获取base64图片大小
Oct 18 #Javascript
react MPA 多页配置详解
Oct 18 #Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
You might like
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
MySQL面试题
2014/01/12 面试题
接口可以包含哪些成员
2012/09/30 面试题
房屋租赁意向书
2014/04/01 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
2014年库房工作总结
2014/11/26 职场文书
护士个人年终总结
2015/02/13 职场文书
慰问信模板
2015/02/14 职场文书
电影圆明园观后感
2015/06/03 职场文书
高中体育课教学反思
2016/02/16 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript
Golang并发工具Singleflight
2022/05/06 Golang