基于Vue开发数字输入框组件


Posted in Javascript onDecember 19, 2017

随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!!

1、概述

Vue组件开发的API:props、events和slots

2、组件代码

github地址:https://github.com/MengFangui/VueInputNumber

效果:

基于Vue开发数字输入框组件

(1)index.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>数字输入框组件</title>
  </head>
  <body>
    <div id="app">
      <!--数字输入框组件命名为:input-number-->
      <!--数字输入框组件默认值为5,最大值为10,最小值为0-->
      <input-number v-model='value' :max='10' :min='0'></input-number>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script src="js/input-number.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

(2)input-number.js

//验证输入值是否为数字
function isValueNumber(value) {
  return(/(^-?[0-9]+\.{1}\d+$)|(^-?[1-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实现与父组件的通信(父组件-->子组件)
  //对每个props进行校验,props的值可以是数组,也可以是对象
  props: {
    max: {
      //必须是数字类型
      type: Number,
      //默认值为Infinity
      default: Infinity
    },
    min: {
      type: Number,
      default: -Infinity
    },
    value: {
      type: Number,
      default: 0
    }
  },
  //Vue组件为单向数据流,声明data来引用父组件的value,在组件内部维护currentValue
  data: function() {
    return {
      currentValue: this.value
    }
  },
  //监听:与父组件通信 (子组件-->父组件)
  watch: {
    currentValue: function(val) {
      //使用v-model改变value 
      //this指向当前组件实例
      this.$emit('input', val)
    }
    //    ,
    //本示例未使用自定义函数,使用了v-mode input函数来更新value
    //    value: function(val) {
    //      //自定义事件on-change,告知父组件数字输入框值有所改变
    //      this.$emit('on-change', 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.currentValue <= this.min) {
        return;
      }
      this.currentValue -= 1;
    },
    handleUp: function() {
      if(this.currentValue >= 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.current = max;
        }
        if(val < min) {
          this.current = min;
        }
      } else {
        //如果输入的不是数字,将输入的内容重置为之前的currentValue
        event.target.value = this.currentValue;
      }
    }
  },
  //初始化
  mounted: function() {
    this.updateValue(this.value);
  }
})

(3)index.js

var app = new Vue({
  el: '#app',
  data: {
    //数字输入框组件默认值为5(父组件设置初始化值)
    value: 5
  }
})

总结

以上所述是小编给大家介绍的基于Vue开发数字输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 解析url的search方法
Feb 09 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
微信小程序实现聊天室功能
Jun 14 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
从setTimeout看js函数执行过程
Dec 19 #Javascript
mongoose更新对象的两种方法示例比较
Dec 19 #Javascript
jquery中done和then的区别(详解)
Dec 19 #jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 #Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 #Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 #Javascript
You might like
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
js调用后台servlet方法实例
2013/06/09 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
Javascript继承机制详解
2017/05/30 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
微信小程序上传图片实例
2018/05/28 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
set在python里的含义和用法
2019/06/24 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python实现批量命名照片
2020/06/18 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
大学生活动总结模板
2014/07/02 职场文书