Vue 组件开发 - 数据输入框组件
目錄
- 設計通用組件的一般思路
- 組件效果
- 1. HTML結構
- 2. index.js
- 3. input-number.js
- 3.1 input-number.js代碼注解
設計通用組件的一般思路
明確需求；
設計API（組件的API：只來自props、events 和 slots）；
2.1 確定命名、規則
2.2 編寫業務邏輯
即使邏輯的第一版沒做好，后續還可迭代完善；但如果 API 沒設計好，后續修改成本很高。
組件效果
1. HTML結構
由于本示例以交互功能為主，CSS美化樣式簡單處：
基本結構代碼，初始化項目如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>輸入框組件</title><style>#app {width: 260px;height: 80px;line-height: 80px;margin: 100px auto;border: 1px solid #a5a5a5;}.input-number input {width: 70px;margin-left: 50px;text-align: center;}.input-number button {width: 24px;text-align: center;}</style> </head><body><div id="app"><!--在父組件引入input-number 組件，并給它－個默認值1，最大值10，最小值0--><input-number v-model="value" :max="10" :min="1"></input-number></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="input-number.js"></script><script src="./index.js"></script> </body> </html>注： value 是一個關鍵的綁定值， 所以用了v-model ，這樣既優雅地實現了 雙向綁定，也讓API 看起來很合理。大多數的表單類組件都應該有一個v-model ， 比如 輸入框、單選框、多選框、下拉選擇器等。
2. index.js
var app = new Vue({el: '#app',data: {value: 1} })3. input-number.js
完整代碼：
function isValueNumber(value) {return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + ''); }Vue.component('input-number', {template: `<div class="input-number"><input type="text" @keyup="currentKeyCode" :value="currentValue" @change='handleChange'> <button @click="handleDown" :disabled="currentValue<=min">-</button><button @click="handleUp" :disabled="currentValue>=max">+</button></div>`,props: {max: {type: Number,default: Infinity},min: {type: Number,default: Infinity},value: {type: Number,default: 1}},data() {return {currentValue: this.value}},// 監聽prop 或 data 值的改變watch: {//監聽currentValue ,當currentValue 改變時，更新valuecurrentValue: function(val) {//使用 v-model 時改變valuethis.$emit('input', val);//觸發自定義事件on-change,告知父組件數字輸入框的值有所改變this.$emit('on-change', val);},// 監聽value 知曉從父組件修改了valuevalue: function(val) {//this 指向當前組件實例，所以可直接調用this.updateValue（）this.updateValue(val)}},methods: {handleDown: function() {if (this.currentValue <= this.min) return;this.currentValue -= 1;},handleUp: function() {if (this.currentValue >= this.max) return;this.currentValue += 1;},//過濾出符合條件（最大值、最小值）的正確的currentValueupdateValue: function(val) {if (val > this.max) val = this.max;if (val < this.min) val = this.min;this.currentValue = val;},//（在輸入框獲取焦點時）增加對鍵盤上下按鍵的支持，實現 +1 和-l 操作currentKeyCode: function(e) {if (e.keyCode == 40) {if (this.currentValue <= this.min) return;this.currentValue -= 1;} else if (e.keyCode == 38) {if (this.currentValue >= this.max) return;this.currentValue += 1;}},handleChange: function(e) {var val = e.target.value.trim();var max = this.max;var min = this.min;// 如果輸入的數字符合要求，則把輸入的值賦給 currentValue。if (isValueNumber(val)) {val = Number(val);this.currentValue = val;if (val > max) {this.currentValue = max;} else if (val < min) {this.currentValue = min;}} else {// 如果輸入非數字，則將該內容重置為之前的currentValue。e.target.value = this.currentValue}}},//生命周期鉤子函數mounted: function() {// 首次初始化時，對 value 進行過濾。this.updateValue(this.value)} })3.1 input-number.js代碼注解
組件配置都在這里面定義。先在template里定義了組件的根節點，因為是獨立組件，所以應該對每個prop 進行校驗。這里根據需求有最大值、最小值、默認值（也就是綁定值） 3 個 prop，max 和 min 都是數字類型，默認值是正無限大和負無限大； value 也是數字類型，默認值是 1 。
Vue 組件是單向數據流，所以無法從組件內部直接修改prop value 的值。
解決辦法： 給組件聲明一個data，默認引用value的值，然后在組件內部維護這個data。
但是，這樣只解決了初始化時引用父組件value 的問題， 如果從父組件修改了value , input-number組件的currentValue也要一起更新。
為了實現這個功能， 需要用到監聽（watch）。watch 選項用來監聽某個prop 或data的改變， 當它們發生變化時，就會觸發watch 配置的函數，從而業務邏輯。
這里需要監聽兩個量： value 和currentValue. 監聽value 是要知曉從父組件修改了value，監聽currentValue是當currentValue改變時，更新value 。
總結
以上是生活随笔為你收集整理的Vue 组件开发 - 数据输入框组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安装 kivy
- 下一篇： Vue导航点击路由跳转后样式不变