說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法
更新時(shí)間：2019年01月08日 10:56:53 作者：deniro
這篇文章主要介紹了說說如何在Vue.js中實(shí)現(xiàn)數(shù)字輸入組件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
我們對普通輸入框進(jìn)行擴(kuò)展，實(shí)現(xiàn)一個(gè)可快捷輸入數(shù)字組件。
首先制定規(guī)則：
- 只能輸入數(shù)字。
- 設(shè)計(jì)兩個(gè)快捷按鈕，可直接在當(dāng)前值的基礎(chǔ)上增 1 或者減 1。
- 數(shù)字輸入組件可設(shè)置初始值、最大值與最小值。
接著，規(guī)劃好 API。一個(gè) Vue.js 組件最重要的 3 個(gè)部分就是 props、events 以及 slot，我們需要定義這三個(gè)部分的命名以及業(yè)務(wù)規(guī)則。這個(gè)組件比較簡單，所以我們只用到 props 與 events。
1 基礎(chǔ)版
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>數(shù)字輸入組件</title>
</head>
<body>
<div id="app">
<number-input v-model="value" :min="0" :max="6"></number-input>
</div>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="number.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: 3
}
});
</script>
</body>
</html>
這里，我們使用了 v-model，雙向綁定了 value。
number.js：
/**
* 是否為數(shù)字
* @param val
* @returns {boolean}
*/
function isNum(val) {
return (/^[0-9]*$/).test(val);
}
/**
* 數(shù)字輸入組件
*/
Vue.component('number-input', {
template: '\
<div class="number-input">\
<input \
type="text"\
:value="currentVal"\
@change="change">\
<button\
@click="down"\
:disabled="currentVal<=min">-</button>\
<button\
@click="up"\
:disabled="currentVal >=max">+</button>\
</div>',
props: {//校驗(yàn)
//最大值
max: {
type: Number,
default: Infinity
},
//最小值
min: {
type: Number,
default: -Infinity
},
//初始值
value: {
type: Number,
default: 0
}
},
data: function () {
return {
currentVal: this.value
}
},
watch: {
currentVal: function (val) {
console.log("currentVal:" + this.currentVal);
this.$emit('input',val);
},
value: function (val) {//更新 currentVal
this.update(val);
}
},
methods: {
/**
* 更新
* @param val
*/
update: function (val) {
//讓輸入的值在限定范圍內(nèi)
if (val > this.max) {
val = this.max;
}
if (val < this.min) {
val = this.min
}
this.currentVal = val;
},
/**
* 減少
*/
down: function () {
if (this.currentVal <= this.min) {
return;
}
this.currentVal -= 1;
},
/**
* 增長
*/
up: function () {
if (this.currentVal >= this.max) {
return;
}
this.currentVal += 1;
},
/**
* 如果輸入的值，
* @param event
*/
change: function (event) {
var val = event.target.value.trim();//獲取輸入值
if (isNum(val)) {//賦值 currentVal
val = Number(val);
this.currentVal = val;
//超出限定范圍時(shí)，規(guī)整
var max = this.max;
var min = this.min;
if (val > max) {
this.currentVal = max;
} else if (val < min) {
this.currentVal = min;
}
} else {//還原為 currentVal
event.target.value = this.currentVal;
}
}
},
mounted: function () {
//對初始值進(jìn)行范圍限定
this.update(this.value);
}
});
這里，我們專門定義了一個(gè) number.js，用于定義數(shù)字輸入組件。
在 number.js 中，我們做了如下工作：
- 利用正則表達(dá)式 ，定義了一個(gè)判斷 “是否為數(shù)字” 的函數(shù)。
- 在模板定義中，我們定義了一個(gè)輸入框以及兩個(gè)按鈕，首先在 input 中綁定了 currentVal 數(shù)據(jù)以及原生的 change 事件。接著，定義了遞增與遞減按鈕，每個(gè)按鈕都綁定了相應(yīng)的事件，還綁定了 disabled 屬性，這樣當(dāng)輸入的值超出范圍時(shí)，按鈕就會置灰不可用。
- 在定義的 change() 方法中，先獲取輸入值，然后判斷是否為數(shù)字。如果是數(shù)字，則賦值給 currentVal；如果不是數(shù)字，則還原為 currentVal，這樣可以保證組件的內(nèi)容始終是數(shù)字。
- 接著在 props 中，對每一個(gè)參數(shù)（最大值、最小值、初始值）定義了相應(yīng)的校驗(yàn)規(guī)則。這樣就可以在父組件中初始化這個(gè)數(shù)字輸入組件啦O(∩_∩)O~
- 因?yàn)?Vue.js 組件時(shí)單向數(shù)據(jù)流，所以不能在組件內(nèi)部修改之前在 props 中定義的 value。我們可以在 data 函數(shù)中，聲明一個(gè) currentVal，并把 props 中定義的 value 值賦給它。這樣就實(shí)現(xiàn)了組件初始化時(shí)，引用父組件中的值的工作。
- 為了當(dāng)父組件修改了輸入值，也要更新子組件中的 currentVal 的功能，我們需要用到 watch 屬性。 watch 屬性用于監(jiān)聽某個(gè) prop 或者 data，當(dāng)它們發(fā)生變化時(shí)，會觸發(fā)定義在 watch 中的函數(shù)。這里我們監(jiān)聽了 currentVal 與 value，監(jiān)聽了 currentVal 是為了將來當(dāng)內(nèi)部更新了 currentVal 的場景時(shí)，可以同步到 Value，這里起核心作用的是監(jiān)聽 value 值。為了讓輸入的值在限定范圍內(nèi)，這里封裝了一個(gè) update() 函數(shù)。
- watch 中的監(jiān)聽函數(shù)，有兩個(gè)入?yún)?，第一個(gè)是新值，第二個(gè)是舊值。這里只用到新值。因?yàn)楸O(jiān)聽函數(shù)中的 this ，指向的是當(dāng)前組件實(shí)例，所以可以直接調(diào)用定義在 methods 中的函數(shù)。
- 為了在組件初始化時(shí)，對初始值進(jìn)行范圍限定，這里在 mounted 掛載函數(shù)中，也調(diào)用了 update() 函數(shù)。
效果：
2 按鍵支持
當(dāng)輸入框獲得焦點(diǎn)時(shí)，按下“向上鍵”時(shí)，增長；按下“向上鍵”時(shí)，減少。
這可以利用按鍵修飾符來實(shí)現(xiàn)，我們修改示例中的組件模板：
...
<input
type="text"
:value="currentVal"
@change="change"
@keyup.up="up"
@keyup.down="down">
...
Vue.js 定義按鍵別名有這些：
- .enter
- .tab
- .delete(捕獲“刪除”和“退格”鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
效果：
3 控制步伐
新增一個(gè)步伐屬性，增長或者減少以步伐值為變化量。之前的示例，步伐為 1。
首先在 props 中，定義一個(gè)步伐屬性：
//步伐
step: {
type: Number,
default: 1
}
然后在增長與減少函數(shù)中，使用步伐屬性做為變化量：
/**
* 減少
*/
down: function () {
if (this.currentVal <= this.min) {
return;
}
this.currentVal -= this.step;
},
/**
* 增長
*/
up: function () {
if (this.currentVal >= this.max) {
return;
}
this.currentVal += this.step;
},
最后為組件重新配置參數(shù)：
<number-input v-model="value" :min="0" :max="50" :step="5"></number-input>
效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了vue自定義marquee無縫滾動組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章給大家分享了vue移動端路由切換實(shí)例以及相關(guān)知識點(diǎn)，對此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
這篇文章主要為大家介紹了vue中key使用的問題示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue項(xiàng)目實(shí)現(xiàn)簡單的權(quán)限控制管理功能
這篇文章主要介紹了Vue項(xiàng)目實(shí)現(xiàn)簡單的權(quán)限控制功能，文中給大家介紹了兩種方式進(jìn)行權(quán)限限制，本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-07-07
VUE+Element實(shí)現(xiàn)增刪改查的示例源碼
這篇文章主要介紹了VUE+Element實(shí)現(xiàn)增刪改查的示例源碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
vue父組件與子組件之間的數(shù)據(jù)交互方式詳解
最近一直在做一個(gè)vue移動端商城的實(shí)戰(zhàn),期間遇到一個(gè)小小的問題,值得一說,下面這篇文章主要給大家介紹了關(guān)于vue父組件與子組件之間數(shù)據(jù)交互的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義下拉菜單功能,文章先通過實(shí)例代碼給大家介紹，后面對用到的知識點(diǎn)總結(jié)，需要的朋友可以參考下2018-07-07
vite+vue3項(xiàng)目啟動報(bào)錯(cuò)Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項(xiàng)目啟動報(bào)錯(cuò)Unexpected?“%“問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了關(guān)于vue中媒體查詢不起效的原因總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2.0權(quán)限樹組件實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了Vue2.0權(quán)限樹組件實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08