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 Select标记中options操作方法集合
Oct 22 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
详解React中setState回调函数
Jun 14 Javascript
vue 自定义指令自动获取文本框焦点的方法
Aug 25 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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过程中的一些注意点的总结
2013/10/25 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python检测服务器端口代码实例
2019/08/31 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python dumps和loads区别详解
2020/02/04 Python
python输出pdf文档的实例
2020/02/13 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
EJB的几种类型
2012/08/15 面试题
技校生自我鉴定
2013/12/08 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
骨干教师培训感言
2014/01/16 职场文书
《自然之道》教学反思
2014/02/11 职场文书
争先创优心得体会
2014/09/12 职场文书
一般纳税人申请报告
2015/05/18 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python