vue输入框组件开发过程详解
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了vue输入框组件开发过程的具体代码，供大家参考，具体内容如下
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"\
@focus="keyControl">\
<button \
@click="handleDown" \
:disabled="currentValue<=min">-</button>\
<button \
@click="handleUp" \
:disabled="currentValue>=max">+</button>\
</div>',
data: function (){
return {
currentValue: this.value,
currentStep: this.$parent.step
}
},
watch: {
currentValue: function (val){
this.$emit('input',val);
this.$emit('on-change',val);
},
value: function(val){
this.updateValue(val);
}
},
methods: {
handleDown: function(){
if(this.currentValue<=this.min) return;
this.currentValue-=this.currentStep;
},
handleUp: function(){
if(this.currentValue>=this.max) return;
this.currentValue+=this.currentStep;
},
updateValue: function(val){
if(val>this.max) val=this.max;
if(val<this.min) val=this.min;
this.currentValue=val;
},
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;
}
},
keyControl: function(){
var _this=this;
$(window).keydown(function(e){
if($('input')){
if(e.keyCode==38){
_this.handleUp();
}
else if(e.keyCode==40){
_this.handleDown();
}
}
});
}
},
mounted: function(){
this.updateValue(this.value);
},
props:{
max:{
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type:Number,
default: 0
},
step: {
type:Number,
default: 1
}
}
})index.js
var app=new Vue({
el: "#app",
data: {
value: 5,
step: 10
}
})index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script class="lazy" data-src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script class="lazy" data-src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="100" :min="0"></input-number>
</div>
<script class="lazy" data-src="js/input-number.js" type="text/javascript" charset="utf-8"></script>
<script class="lazy" data-src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
