Vue第一个自定义组件:数字输入框(number-input)
2017-11-22 22:14
786 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字输入框</title> <script type="text/javascript" src="js/lib/vue.js"></script> <script type="text/javascript" src="js/input-test-num.js"></script> </head> <body> <div id="app"> {{value}} <number-input v-model="value" :max="10" :min="-10" :step="2"></number-input> </div> </body> <script type="text/javascript"> function isValueNumber(value){ return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value); } var app = new Vue({ el:'#app', data:{ value:0 } }); </script> </html>
JS:input-test-num.js
Vue.component('number-input',{ // 定义来自父级的参数 props:{ max:{ type:Number, default:Infinity }, min:{ type:Number, default:-Infinity }, value:{ type:Number, default:0 }, step:{ type:Number, default:1 } }, template:'\ <div>\ <input type="text" :value="currentValue" @change="handleChange" @keydown="handleKeydown" />\ <button @click="handleAdd" :disabled="currentValue>=max"> ADD </button>\ <button @click="handleReduce" :disabled="currentValue<=min"> Reduce </button>\ </div>', data:function(){ // Vue组件是单向数据流,无法直接修改prop中的值 var currentValue = 0 ; if(this.value > this.max){ currentValue = this.max ; } else if(this.value < this.min){ currentValue = this.min ; } else{ currentValue = this.value ; } return { currentValue :currentValue } }, methods:{ handleChange:function(event){ var val = event.target.value.trim() ; if(isValueNumber(val)){ var max = this.max ; var min = this.min ; val = Number(val); this.currentValue = val ; if(val>max) this.currentValue = max ; if(val<min) this.currentValue = min ; }else{ // 如果输入的非数字,则保留之前的数据 event.target.value = this.currentValue ; } }, // 绑定键盘事件 handleKeydown:function(event){ if(event.keyCode==38){ this.handleAdd(); } if(event.keyCode==40){ this.handleReduce() ; } }, handleAdd:function(){ if(this.currentValue>=this.max) return ; this.currentValue += this.step ; },handleReduce:function(){ if(this.currentValue<=this.min) return ; this.currentValue -= this.step; }, updateVal:function(val){ if(val>this.max) val = this.max ; if(val<this.min) val = this.min ; this.currentValue = val ; } }, watch:{ // 增加监听 currentValue:function(val){ this.$emit('input',val); this.$emit('on-change',val); }, value:function(val){ this.updateVal(val); } } })
!可根据自己情况增加样式
相关文章推荐
- 动手写个数字输入框1:input[type=number]的遗憾
- Vue自定义组件(一)货币输入框
- Vue 限制input输入 限数字 或 小数点后两位number
- 动手写个数字输入框1:input[type=number]的遗憾
- 使用Vue自定义数字键盘组件(体验度极好)
- 基于Vue开发数字输入框组件
- 基于Vue的数字输入框组件开发
- 一个自定义的数字输入框控件
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"
- input输入框匹配数字(带两位小数) js--金额匹配
- js限制input只能输入有效的数字(第一个不能是小数点)
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- css美化number类型输入框美化实现自定义+、-号点击按钮增减效果
- vue 自定义报警组件
- vue自定义日期组件
- vue 自定义全局方法,在组件里面的使用介绍
- input 输入框 只能输入数字、字母、汉字等
- vue中监听input只能输入数字及英文或者其他情况
- angularjs中的验证input输入框只能输入数字和小数点
- 自定义vue全局组件use使用、vuex的使用