1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>数字输入框</title>
  6. 	<script type="text/javascript" src="js/lib/vue.js"></script>
  7. 	<script type="text/javascript" src="js/input-test-num.js"></script>
  8. </head>
  9. <body>
  10. 	<div id="app">
  11. 			{{value}}
  12. 		<number-input v-model="value" :max="10" :min="-10" :step="2"></number-input>
  13. 	</div>
  14. </body>
  15. <script type="text/javascript">
  16. function isValueNumber(value){
  17. 	return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value);
  18. }
  19.  
  20. var app = new Vue({
  21. 	el:'#app',
  22. 	data:{
  23. 		value:0
  24. 	}
  25. });
  26. </script>
  27. </html>

　　JS:input-test-num.js

  1. Vue.component('number-input',{
  2.     // 定义来自父级的参数
  3.     props:{
  4.         max:{
  5.             type:Number,
  6.             default:Infinity
  7.         },
  8.         min:{
  9.             type:Number,
  10.             default:-Infinity
  11.         },
  12.         value:{
  13.             type:Number,
  14.             default:0
  15.         },
  16.         step:{
  17.             type:Number,
  18.             default:1
  19.         }
  20.     },
  21.     template:'\
  22.         <div>\
  23.             <input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown" />\
  24.             <button @click="handleAdd" :disabled="currentValue>=max"> ADD </button>\
  25.             <button @click="handleReduce" :disabled="currentValue<=min"> Reduce </button>\
  26.         </div>',
  27.     data:function(){
  28.         // Vue组件是单向数据流，无法直接修改prop中的值
  29.         var currentValue = 0 ;
  30.         if(this.value > this.max){
  31.             currentValue = this.max ;
  32.         } else if(this.value < this.min){
  33.             currentValue = this.min ;
  34.         } else{
  35.             currentValue = this.value ;
  36.         }
  37.         return {
  38.             currentValue :currentValue
  39.         }
  40.     },
  41.     methods:{
  42.         handleChange:function(event){
  43.             var val = event.target.value.trim() ;
  44.             if(isValueNumber(val)){
  45.                 var max = this.max ;
  46.                 var min = this.min ;
  47.                 val = Number(val);
  48.                 this.currentValue = val ;
  49.                 if(val>max) this.currentValue = max ;
  50.                 if(val<min) this.currentValue = min ;
  51.             }else{
  52.                 // 如果输入的非数字，则保留之前的数据
  53.                 event.target.value = this.currentValue ;
  54.             }
  55.         },
  56.         // 绑定键盘事件
  57.         handleKeydown:function(event){
  58.             if(event.keyCode==38){
  59.                 this.handleAdd();
  60.             }
  61.             if(event.keyCode==40){
  62.                 this.handleReduce() ;
  63.             }
  64.         },
  65.         handleAdd:function(){
  66.             if(this.currentValue>=this.max) return ;
  67.             this.currentValue += this.step ;
  68.         },handleReduce:function(){
  69.             if(this.currentValue<=this.min) return ;
  70.             this.currentValue -= this.step;
  71.         },
  72.         updateVal:function(val){
  73.             if(val>this.max) val = this.max ;
  74.             if(val<this.min) val = this.min ;
  75.             this.currentValue = val ;
  76.         }
  77.     },
  78.     watch:{
  79.         // 增加监听
  80.         currentValue:function(val){
  81.             this.$emit('input',val);
  82.             this.$emit('on-change',val);
  83.         },
  84.         value:function(val){
  85.             this.updateVal(val);
  86.         }
  87.     }
  88. })

！可根据自己情况增加样式

Vue第一个自定义组件：数字输入框(number-input)的更多相关文章

  1. 《vue.js实战》练习---数字输入框组件

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  3. Vue.extend提供自定义组件的构造器

    Vue.extend 返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue实例构造器.经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元 ...

  4. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  5. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  6. vue之全局自定义组件

    在项目开发中,往往需要使用到一些公共组件,比如,弹出消息.面包屑或者其它的组件,为了使用方便,将其以插件的形式融入到vue中,以面包屑插件为例: 1.创建公共组件MyBread.vue <tem ...

  7. 【vue】canvas验证码组件--数字/数字加字母

    基于canvas的数字/数字+字符验证码   SIdentify.vue 组件 <!-- 基于canvas的数字/数字+字符验证码 --> <!-- 调用格式 <s-ident ...

  8. Vue图片验证码-自定义组件高级版

    最近项目中要用到图片验证码,网上一查有很多,基本都是千篇一律的4位纯数字验证码.首先得感谢那位一代目兄台提供的模板,由于不能满足需求,所以对其进行了改造升级. 经改造的图片验证码能满足一下情形使用:① ...

  9. 使用vue的extend自定义组件开发

    index.js import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); cons ...

随机推荐

  1. awk练习题-v参数

    [xxxx.com]a=123bsas=sa2asd=a12ip=ip123[ooo.com]asd12=1223ip=ip123xas=123[xxoo.cn]asas=123sip=xs12213 ...

  2. nginx配置文件中的location理解

    关于一些对location认识的误区 1. location 的匹配顺序是"先匹配正则,再匹配普通". 矫正: location 的匹配顺序其实是"先匹配普通,再匹配正则 ...

  3. struts2.xml的配置问题

    1.<package namespace="/"></package> namespace决定访问action的路径: 如果省略,将代表任意路径: 2.&l ...

  4. 自动化安装DHCP配置脚本

    DHCP配置脚本: #!/bin/sh NET=192.168.6.0 MASK=255.255.255.0 RANGE="192.168.6.50 192.168.6.100" ...

  5. javascript中this指向问题

    本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html this是JavaScript的一个关 ...

  6. 《.NET 设计规范》第 8 章：使用规范

    第 8 章:使用规范 8.1 数组 要在公共 API 中优先使用集合,避免使用数组. 不要使用只读的数组字段.虽然字段本身是只读的,用户不能修改它们,但用户可以修改数组中的元素. 考虑使用不规则数组, ...

  7. 知识点干货—多线程同步【6】之synchronized

    "明日复明日,明日何其多. 我生待明日,万事成蹉跎. 世人若被明日累,春去秋来老将至. 朝看水东流,暮看日西坠. 百年明日能几何?请君听我明日歌. 明日复明日,明日何其多! 日日待明日,万世 ...

  8. c# 程序结构

    最近工作中需要用到c#,所以从今天开始博客不定期更新c#学习笔记 c#程序结构大体分为, 命名空间 类 Main 方法   命名空间 相当于一个仓库 通过 using 引入命名空间 比如 using ...

  9. 从返回的HTTP Header信息中隐藏Apache的版本号及PHP的X-Powered-By信息

    默认情况下,很多apache安装时会显示版本号及操作系统版本,甚至会显示服务器上安装的是什么样的apache模块.这些信息可以为黑客所用,并且黑客还可以从中得知你所配置的服务器上的很多设置都是默认状态 ...

  10. Flask之基于route装饰器的路由系统（源码阅读解析）

    一 路由系统 1. 在flask中配置URL和视图函数的路由时,首先需要在main.py中实例化一个app对象: from flask import Flask, render_template ap ...