基于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中yield实用简洁实现方式
Jun 12 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
jquery.post用法示例代码
Jan 03 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
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输入输出流学习笔记
2015/05/12 PHP
降低PHP Redis内存占用
2017/03/23 PHP
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python图形用户接口实例详解
2019/12/16 Python
PyQt5实现简单的计算器
2020/05/30 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python解析微信dat文件的方法
2020/11/30 Python
SQL Server笔试题
2012/01/10 面试题
学生党员思想汇报范文
2014/01/09 职场文书
全陪导游欢迎词
2014/01/17 职场文书
老师给学生的表扬信
2014/01/17 职场文书
人事文员岗位职责
2014/02/16 职场文书
联片教研活动总结
2014/07/01 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Python进行区间取值案例讲解
2021/08/02 Python