基于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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
javascript中this指向详解
2016/04/23 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
python中的字典操作及字典函数
2018/01/03 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
python 显示数组全部元素的方法
2018/04/19 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
酒鬼酒广告词
2014/03/21 职场文书
演讲稿格式范文
2014/05/19 职场文书
争先创优活动总结
2014/08/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server