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 相关文章推荐
Javascript 阻止javascript事件冒泡,获取控件ID值
Jun 27 Javascript
Javascript 面向对象 继承
May 13 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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通过get方法获得form表单数据方法总结
2018/09/12 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
JavaScript代码实现简单计算器
2020/12/27 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Django实现celery定时任务过程解析
2020/04/21 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
详解Scrapy Redis入门实战
2020/11/18 Python
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
工程造价自荐信
2013/10/09 职场文书
cf收人广告词
2014/03/14 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
公司离职证明标准范本
2014/10/05 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书
通知函格式范文
2015/04/27 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
python 实现的截屏工具
2021/05/08 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
Python合并pdf文件的工具
2021/07/01 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python