基于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 相关文章推荐
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
vue中锚点的三种方法
Jul 06 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP学习之PHP运算符
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Django 前后台的数据传递的方法
2017/08/08 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
Python合并多个Excel数据的方法
2018/07/16 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
商场总经理岗位职责
2014/02/03 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书