溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在Vue中使用數字輸入框組件？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
基礎需求
只能輸入數字
設置初始值，最大值，最小值
在輸入框聚焦時，增加對鍵盤上下鍵的支持
增加一個控制步伐prop-step,例如，設置為10 ，點擊加號按鈕，一次增加10
項目搭建
在了解需求后，進行項目的初始化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input-number></input-number>
</div>
</body>
</html>
<script>
Vue.component('input-number',{
template: `
<div class="input-number">
<input type="text" />
<button>-</button>
<button>+</button>
</div>
`}
var app = new Vue({
el:'#app'
})
</script>初始化結構搭好后，由于要設置初始值，最大值、最小值，我們在父組件中的 < input-number>< /input-number>上設置這些值，并且通過Props將父組件數據傳遞給子組件
父組件中添加數據：value是一個關鍵的綁定值，所以用v-model，實現雙向綁定。
<input-number v-model="value" :max="100" :min="0"></input-number>
在子組件中添加props選項：
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},我們知道，Vue組件時單項數據流，所以無法在子組件上更改父組件傳遞的數據，在這里子組件只改變value值，所以我們給子組件設置一個data數據，默認引用value值，然后在組件內部維護這個data。
data() {
return{
// 保存初次父組件傳遞的數據
currentValue : this.value,
}
}并且給子組件的input元素綁定value
<input type="text" :value="currentValue" />
這樣只解決了初始化時引用父組件value的問題，但是如果父組件修改了value，子組件無法感知，我們想要currentValue一起更新。那么就要使用wacth監聽選項監聽value。
當父組件value發生變化時，子組件currentValue也跟著變化。
當子組件currentValue變化時，使用$emit觸發v-model，使得父組件value也跟著變化
watch: {
// 監聽屬性currentValue與value
currentValue(val) {
// currentValue變化時，通知父組件的value也變化
this.$emit('input', val);
},
value(val) {
// 父組件value改變時，子組件currentValue也改變
this.updataValue(val);
}
}，
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
}
},
// 第一次初始化時，也對value進行過濾
mounted: function() {
this.updataValue(this.value);
}上述代碼中，生命周期mounted鉤子也使用了updateValue()方法，是因為初始化時也要對value進行驗證。
父子間的通信解決差不多了，接下來完成按鈕的操作：添加handleDown與handleUp方法
template: `
<div class="input-number">
<input type="text" :value="currentValue" />
<button @click="handleDown" :disabled="currentValue <= min">-</button>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>
`,
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 點擊減號 減10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 點擊加號 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},當用戶在輸入框想輸入具體的值時，怎么辦？
為input綁定原生change事件，并且判斷輸入的是否數字：
<input type="text" :value="currentValue" @change="handleChange" />
在methods選項中，添加handleChange方法：
// 輸入框輸入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}在外層添加判斷是否為數字的方法isValueNumber：
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}到此一個數字輸入框組件基本完成，但是前面提出的后兩個要求也需要實現，很簡單，在input上綁定一個keydown事件，在data選項中添加數據prop_step
<input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
data() {
return{
// 保存初次父組件傳遞的數據
currentValue : this.value,
prop_step: 10
}
} // 當聚焦時，按上下鍵改變
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input-number v-model="value" :max="100" :min="0"></input-number>
</div>
</body>
</html>
<script>
function isValueNumber(value) {
return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+ '');
}
Vue.component('input-number',{
props: {
max: {
type: Number,
default: Infinity
},
min: {
type: Number,
default: -Infinity
},
value: {
type: Number,
default: 0
}
},
template: `
<div class="input-number">
<input type="text" :value="currentValue" @change="handleChange" @keydown="handleChange2" />
<button @click="handleDown" :disabled="currentValue <= min">-</button>
<button @click="handleUp" :disabled="currentValue >= max">+</button>
</div>
`,
data() {
return{
// 保存初次父組件傳遞的數據
currentValue : this.value,
prop_step: 10
}
},
watch: {
// 監聽屬性currentValue與value
currentValue(val) {
// currentValue變化時，通知父組件的value也變化
this.$emit('input', val);
},
value(val) {
// 父組件value改變時，子組件currentValue也改變
this.updataValue(val);
}
},
methods: {
updataValue(val) {
if(val > this.max) val = this.max;
if(val < this.min) val = this.min;
this.currentValue = val;
},
// 點擊減號 減10
handleDown() {
if(this.currentValue < this.min) return
this.currentValue -= this.prop_step;
},
// 點擊加號 加10
handleUp() {
if(this.currentValue < this.min) return
this.currentValue += this.prop_step;
},
// 輸入框輸入值
handleChange(event) {
var val = event.target.value.trim();
var max = this.max;
var min = this.min;
if(isValueNumber(val)) {
val = Number(val);
if(val > max) {
this.currentValue = max;
}
if(val < min) {
this.currentValue = min;
}
this.currentValue = val;
console.log(this.value);
}else {
event.target.value = this.currentValue;
}
},
// 當聚焦時，按上下鍵改變
handleChange2(event) {
console.log(event.keyCode)
if(event.keyCode == '38') {
this.currentValue ++;
}
if(event.keyCode == '40') {
this.currentValue --;
}
}
},
// 第一次初始化時，也對value進行過濾
mounted: function() {
this.updataValue(this.value);
}
})
var app = new Vue({
el:'#app',
data:{
value: 5
}
})
</script>關于如何在Vue中使用數字輸入框組件問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
