基于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 相关文章推荐
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JSONP基础知识详解
Mar 19 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
详解react、redux、react-redux之间的关系
Apr 11 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
在pycharm中开发vue的方法步骤
Mar 04 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冒泡算法详解(递归实现)
2014/11/10 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
如何基于python操作excel并获取内容
2019/12/24 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
天网面试题
2013/04/07 面试题
工程地质勘察专业大学生求职信
2013/10/13 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
大学生党员自我批评
2014/02/14 职场文书
中药专业自荐信范文
2014/03/18 职场文书
2014年会策划方案
2014/05/11 职场文书
初中新生军训方案
2014/05/13 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS