Vue 组件开发 - 数据输入框组件
目錄
- 設(shè)計(jì)通用組件的一般思路
- 組件效果
- 1. HTML結(jié)構(gòu)
- 2. index.js
- 3. input-number.js
- 3.1 input-number.js代碼注解
設(shè)計(jì)通用組件的一般思路
明確需求；
設(shè)計(jì)API（組件的API：只來自props、events 和 slots）；
2.1 確定命名、規(guī)則
2.2 編寫業(yè)務(wù)邏輯
即使邏輯的第一版沒做好，后續(xù)還可迭代完善；但如果 API 沒設(shè)計(jì)好，后續(xù)修改成本很高。
組件效果
1. HTML結(jié)構(gòu)
由于本示例以交互功能為主，CSS美化樣式簡(jiǎn)單處：
基本結(jié)構(gòu)代碼，初始化項(xiàng)目如下：
<!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 組件，并給它－個(gè)默認(rèn)值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 是一個(gè)關(guān)鍵的綁定值， 所以用了v-model ，這樣既優(yōu)雅地實(shí)現(xiàn)了 雙向綁定，也讓API 看起來很合理。大多數(shù)的表單類組件都應(yīng)該有一個(gè)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}},// 監(jiān)聽prop 或 data 值的改變watch: {//監(jiān)聽currentValue ,當(dāng)currentValue 改變時(shí)，更新valuecurrentValue: function(val) {//使用 v-model 時(shí)改變valuethis.$emit('input', val);//觸發(fā)自定義事件on-change,告知父組件數(shù)字輸入框的值有所改變this.$emit('on-change', val);},// 監(jiān)聽value 知曉從父組件修改了valuevalue: function(val) {//this 指向當(dāng)前組件實(shí)例，所以可直接調(diào)用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;},//（在輸入框獲取焦點(diǎn)時(shí)）增加對(duì)鍵盤上下按鍵的支持，實(shí)現(xiàn) +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;// 如果輸入的數(shù)字符合要求，則把輸入的值賦給 currentValue。if (isValueNumber(val)) {val = Number(val);this.currentValue = val;if (val > max) {this.currentValue = max;} else if (val < min) {this.currentValue = min;}} else {// 如果輸入非數(shù)字，則將該內(nèi)容重置為之前的currentValue。e.target.value = this.currentValue}}},//生命周期鉤子函數(shù)mounted: function() {// 首次初始化時(shí)，對(duì) value 進(jìn)行過濾。this.updateValue(this.value)} })3.1 input-number.js代碼注解
組件配置都在這里面定義。先在template里定義了組件的根節(jié)點(diǎn)，因?yàn)槭仟?dú)立組件，所以應(yīng)該對(duì)每個(gè)prop 進(jìn)行校驗(yàn)。這里根據(jù)需求有最大值、最小值、默認(rèn)值（也就是綁定值） 3 個(gè) prop，max 和 min 都是數(shù)字類型，默認(rèn)值是正無限大和負(fù)無限大； value 也是數(shù)字類型，默認(rèn)值是 1 。
Vue 組件是單向數(shù)據(jù)流，所以無法從組件內(nèi)部直接修改prop value 的值。
解決辦法： 給組件聲明一個(gè)data，默認(rèn)引用value的值，然后在組件內(nèi)部維護(hù)這個(gè)data。
但是，這樣只解決了初始化時(shí)引用父組件value 的問題， 如果從父組件修改了value , input-number組件的currentValue也要一起更新。
為了實(shí)現(xiàn)這個(gè)功能， 需要用到監(jiān)聽（watch）。watch 選項(xiàng)用來監(jiān)聽某個(gè)prop 或data的改變， 當(dāng)它們發(fā)生變化時(shí)，就會(huì)觸發(fā)watch 配置的函數(shù)，從而業(yè)務(wù)邏輯。
這里需要監(jiān)聽兩個(gè)量： value 和currentValue. 監(jiān)聽value 是要知曉從父組件修改了value，監(jiān)聽currentValue是當(dāng)currentValue改變時(shí)，更新value 。
總結(jié)
以上是生活随笔為你收集整理的Vue 组件开发 - 数据输入框组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 安装 kivy
- 下一篇： Vue导航点击路由跳转后样式不变