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 相关文章推荐
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
vue-router 权限控制的示例代码
Sep 21 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
JavaScript XML操作 封装类
2009/07/01 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
npm的lock机制解析
2019/06/20 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python的多重继承的理解
2017/08/06 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python字符串三种格式化输出
2020/09/17 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
材料物理专业求职信
2014/09/01 职场文书
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python