如何抽象一個(gè)Vue公共組件

之前一直想寫一篇關(guān)于抽象 Vue 組件的隨筆，無(wú)奈一直沒(méi)想到好的例子。恰巧最近為公司項(xiàng)目做了一個(gè)數(shù)字鍵盤的組件，于是就以這個(gè)為例聊聊如何抽象 Vue 的組件。

先上 Demo 與 源碼。（demo最好在瀏覽器里以手機(jī)模式瀏覽）

在講具體實(shí)現(xiàn)前，我想先分享下自己認(rèn)為的理想的公用組件是什么樣的：

1. 黑盒性，即除了你自己以外，其他的開(kāi)發(fā)者在快速閱讀使用文檔之后可以立刻上手，而不用關(guān)心你的內(nèi)部實(shí)現(xiàn)；

2. 獨(dú)立性，即做好解耦，不與父組件有過(guò)多關(guān)聯(lián)；

3 自定義性，適當(dāng)?shù)乇┞兑恍┹斎虢涌诨蛘叻椒ńo外部用于自定義，同時(shí)也要設(shè)置好這些屬性在外部未輸入時(shí)的默認(rèn)值。 

下面我們先以黑盒的方式看看 demo 中數(shù)字鍵盤組件是如何調(diào)用的（已省略非關(guān)鍵部分代碼）。

App.vue

<template>
......
 <keyboard @submit-event='handleSubmit' @change-event='handleChange'></keyboard>
</template>
<script>
import keyboard from 'Keyboard.vue';
export default {
 data() {
 return {
 value: ''
 };
 },
 methods: {
 handleChange(value, currentValue) {
 console.log(value, currentValue);
 this.value = value;
 },
 handleSubmit() {
 console.log('submit: ' + this.value);
 }
 }
}
</script>

如上，最基本的調(diào)用就完成了。效果如下：

接著，點(diǎn)擊 1-6 與“確定”。如果如下：

可以看到數(shù)字鍵盤已經(jīng)如我們預(yù)期工作了，接下來(lái)分析下該數(shù)字鍵盤組件所有的輸入項(xiàng)。

@change-event：該事件為自定義事件，父組件通過(guò) v-on 注冊(cè)監(jiān)聽(tīng)，子組件內(nèi)部通過(guò) $emit 進(jìn)行觸發(fā)（更多自定義事件相關(guān)內(nèi)容請(qǐng)參考：Vue官方教程）。

每一次點(diǎn)擊數(shù)字按鍵以及退格鍵均會(huì)觸發(fā)該事件，其傳遞兩個(gè)參數(shù)：value，累積點(diǎn)擊的字符組合；currentValue，當(dāng)前點(diǎn)擊的字符。父組件通過(guò) handleChange 方法接收該事件的回調(diào)內(nèi)容。

@submit-event：當(dāng)點(diǎn)擊“確定”鍵即會(huì)觸發(fā)該事件，其不傳遞參數(shù)，只是告訴父組件“我的確定按鈕被點(diǎn)擊了，你要做什么操作自己看著辦吧，之前點(diǎn)擊的數(shù)字已經(jīng)通過(guò) change-event 傳給你了”。父組件通過(guò) handleSubmit 方法接收回調(diào)。

如果只寫這兩個(gè)方法未免也太沒(méi)誠(chéng)意了，我還根據(jù)一些場(chǎng)景編寫了以下幾個(gè)自定義屬性。

max：最大輸入長(zhǎng)度，超過(guò)的部分將不會(huì)觸發(fā) change-event 事件，默認(rèn)無(wú)限制。

<keyboard max='6'></keyboard>

sp-key：自定義的特殊字符，如身份證輸入時(shí)的“X”，會(huì)添加到左下角空白格，默認(rèn)無(wú)。

<keyboard sp-key='X'></keyboard>

random：是否打亂數(shù)字順序，一些有關(guān)銀行賬戶或密碼的輸入經(jīng)常會(huì)見(jiàn)到這種場(chǎng)景，默認(rèn) false。

<keyboard random='true'></keyboard>

從上面的幾個(gè)自定義屬性與事件，我們大概知道了父組件是如何向子組件傳值以及監(jiān)聽(tīng)子組件的變化，但父組件該如何直接調(diào)用子組件內(nèi)部的函數(shù)呢？我們看下面這個(gè)場(chǎng)景。

數(shù)字鍵盤上的鍵盤圖標(biāo)，點(diǎn)擊之后會(huì)將數(shù)字鍵盤收起隱藏。組件內(nèi)部擁有一個(gè)方法 keyboardToggle(true|false) 來(lái)控制鍵盤的彈起和收回，那么如果在組件外部也想調(diào)用這個(gè)方法呢？比如當(dāng)父組件中的 input 獲取到焦點(diǎn)時(shí)。

可以通過(guò) Vue 中的 ref 屬性來(lái)獲取到鍵盤的組件引用，從而調(diào)用其內(nèi)部的方法，如下：

$refs.[refName].keyboardToggle(true|false)

<template>
 <input type='text' @focus='handleShowKeyboard($event)' />
 <keyboard ref='kbref'></keyboard>
</template>
<script>
import keyboard from 'Keyboard';
export default {
 //...
 methods: {
 handleShowKeyboard(e) {
 e && e.preventDefault();
 this.$refs.kbref.keyboardToggle(true);
 }
 }
}
</script>

以上面這種形式便可以在父組件上下文中調(diào)用子組件內(nèi)的方法。

$refs.[refName].handleInit()

數(shù)字鍵盤組件內(nèi)部的初始化方法，用于重新渲染組件。若 random 屬性為 true，則數(shù)字鍵會(huì)刷新隨機(jī)排列。

$refs.[refName].handleClear()

清除之前輸入的字符組合，并觸發(fā) change-event 且返回空字符串。

上面分享了這個(gè)組件所有對(duì)外的屬性與事件，可以發(fā)現(xiàn)我們并未看過(guò)該組件內(nèi)部的一行代碼，但已經(jīng)可以完整的使用它了，下面來(lái)聊聊內(nèi)部實(shí)現(xiàn)。

首先來(lái)看看布局，我將鍵盤分為左右兩部分，右邊部分不用多說(shuō)，左邊的部分是將一個(gè)鍵位數(shù)組通過(guò) v-for 循環(huán)生成。

那么是如何讓 0 和 9 之間空出一格呢，下面看下初始化鍵盤組件的方法。

keyboard.vue

handleInit()

<template>
 <div>
 <div class='kb-left'>
 <div class='kb-item' v-for='item in keyArr'>{{item}}</div>
 <div class='kb-item kb-toggle'></div> //鍵盤圖標(biāo)
 </div>
 <div class='kb-right'>
 //... 
 </div>
 </div>
</template>
<script>
export default {
 data() {
 return {
 baseArr: []
 }
 },
 computed: {
 keyArr() {
 this.handleInit();
 return this.baseArr;
 }
 },
 methods: {
 handleInit() {
 this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
 this.baseArr.splice(this.baseArr.length - 1, 0, '');
 }
 }
}
</script>

即在鍵位數(shù)組倒數(shù)第二位插入一個(gè)空字符，然后循環(huán)生成按鍵。下面看下自定義參數(shù)是如何生效的。

sp-key

<script>
export default {
 props: ['spKey'],
 data() {
 return {
 baseArr: []
 }
 },
 //....
 methods: {
 handleInit() {
 let spKey = this.spKey;
 this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

　　　　　　　this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
 }
 }
}
</script>

在組件內(nèi)部通過(guò) props 屬性接收父組件傳遞的 spKey，之后就可在組件內(nèi)的屬性和方法中通過(guò) this.spKey 進(jìn)行訪問(wèn)。首先判斷 spKey 值是否有效，并代替空字符插入鍵位數(shù)組倒數(shù)第二項(xiàng)。

random

<script>
export default {
 props: ['spKey', 'random'],
 data() {
 return {
 baseArr: []
 }
 },
 //....
 methods: {
 handleInit() {
 let spKey = this.spKey;
 this.baseArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

 　　if (this.random && this.random != 'false') {
 　　this.baseArr.sort(function() {
 　　　return Math.random() - Math.random();
 　　　　});
 }

 this.baseArr.splice(this.baseArr.length - 1, 0, spKey);
 }
 }
}
</script>

將鍵位打亂順序其實(shí)也很簡(jiǎn)單，只要通過(guò)數(shù)組的 sort 方法。sort 方法可以接收一個(gè)函數(shù)作為參數(shù)，若函數(shù)返回正數(shù)則交換前后兩項(xiàng)的位置，若函數(shù)返回負(fù)數(shù)則不作交換。所以將兩個(gè)隨機(jī)數(shù)相減的結(jié)果返回，即可將鍵位數(shù)組隨機(jī)排序。

下面看看在組件內(nèi)部是如何觸發(fā) change-event 的。

handleInput()

<template>
 <div>
 <div class='kb-left'>
 <div @click='handleInput(item)' class='kb-item' v-for='item in keyArr'>{{item}}</div>
 <div class='kb-item kb-toggle'></div> //鍵盤圖標(biāo)
 </div>
 //...
 </div>
</template>
<script>
export default {
 data() {
 return {
 inputStr: ''
 }
 },
 //...
 methods: {
 handleInput(value) {
 this.inputStr += value;
 this.$emit('change-event', this.inputStr, value);
 }
 }
}
</script>

增加了 max 屬性后修改方法如下：

handleInput(value) {
 let max = Number(this.max);
 if (!isNaN(max) && this.inputStr.length+1 > max) {
 return;
 }

 this.inputStr += value;
 this.$emit('change-event', this.inputStr, value);
}

最后看看退格刪除是如何實(shí)現(xiàn)的。

handleDelete()

handleDelete() {
 let str = this.inputStr;
　　 if (!str.length) return;

 this.inputStr = str.substring(0, str.length - 1);
 this.$emit('change-event', this.inputStr);
} 

上面的例子都是些核心代碼的片段，并且其他輔助函數(shù)并未列出，想查看完整的代碼請(qǐng)看源碼。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com