最近自己在练习组件开发，做了一个简单的数字输入框加减的组件，效果图如下：
组件可以传入三个参数，value是初始化值，max是可输入的最大值，min是可输入最小值，当然参数可以按需求继续扩展的。
组件代码如下：
<template>
<div style="text-align: center;margin-top: 20px;">
<input type="text" v-model="currentValue" @change="handleChange">
<button @click="handleUp" :disabled="currentValue >= max">+</button>
<button @click="handleDown" :disabled="currentValue <= min">-</button>
</div>
</template>
<script>
export default {
props:['max','min','value'],
name: "MyInput",
data(){
return {
currentValue:this.value
}
},
watch:{
currentValue: function (val) { //currentValue值变动就向父组件传值
this.$emit('input',val);
this.$emit('on-change',val);
},
value:function (val) { //对值进行验证
this.updataValue(val);
}
},
mounted(){
this.updataValue(this.value);
},
methods:{
handleDown: function () { //加法
if(this.currentValue <= this.min){
return;
}else{
this.currentValue -= 1;
}
},
handleUp: function () { //减法
if(this.currentValue >= this.max){
return;
}else{
this.currentValue += 1;
}
},
updataValue: 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(this.isNumber(val)){
val = Number(val);
this.currentValue = val;
if(val > max){
this.currentValue = max;
}else if(val < min){
this.currentValue = min;
}
}else{
this.currentValue = 0;
}
},
isNumber: function (value) {
return (/^\-?[0-9]+$/).test(value + '');
}
}
}
</script>
<style scoped>
input{
width: 280px;
height: 36px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button{
border: none;
background: #4e83e4;
color: #fff;
height: 36px;
width: 36px;
}
</style>调用组件就很简单了，如下：
<template>
<div>
<h2>数字输入框组件</h2>
<!-- max是可输入的最大值 min是可输入的最小值 value是初始值-->
<my-input v-model="value" :max="10" :min="-5"></my-input>
<p style="text-align: center;"><button @click="doAlert(value)">输入框的值是</button></p>
</div>
</template>
<script>
import MyInput from '../components/MyInput.vue';
export default {
name: "computeNumber",
components:{MyInput},
data(){
return {
value: 1
}
},
methods:{
doAlert: function (val) {
alert(val);
}
}
}
</script>组件做的很简单，欢迎大家一起交流。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
