我們對普通輸入框進行擴展，實現一個可快捷輸入數字組件。
首先制定規則：
只能輸入數字。 設計兩個快捷按鈕，可直接在當前值的基礎上增 1 或者減 1。 數字輸入組件可設置初始值、最大值與最小值。接著，規劃好 API。一個 Vue.js 組件最重要的 3 個部分就是 props、events 以及 slot，我們需要定義這三個部分的命名以及業務規則。這個組件比較簡單，所以我們只用到 props 與 events。
1 基礎版
html：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>數字輸入組件</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：
/** * 是否為數字 * @param val * @returns {boolean} */function isNum(val) { return (/^[0-9]*$/).test(val);}/** * 數字輸入組件 */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: {//校驗 //最大值 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) { //讓輸入的值在限定范圍內 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; //超出限定范圍時，規整 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 () { //對初始值進行范圍限定 this.update(this.value); }});
新聞熱點
疑難解答
圖片精選
