在上篇中，老k為大家介紹了一個初級自定義按鈕元件的編寫方法。雖然能用，但是還不算完美，可擴充性不夠強大。在這一篇中，老k繼續為大家完善這個按鈕元件。
啟動指令視窗， 進入在上篇中我們搭建的vue目錄中，輸入指令npm run dev啟動測試環境，如下圖：
檢視測試頁面，打開谷歌浏覽器中的vue調試工具，檢視生成的元件是否正确，如下圖：
如果出現這個，則證明我們上次編寫的元件運作正确。現在，我們可以根據element-ui的按鈕元件樣式先把通用的按鈕元件樣式編寫好。如下圖：
重新整理測試頁面，檢視效果，如下圖：
但是，element-ui的按鈕元件有7種主題樣式，由type屬性來定義，預設是default。上述我們編寫的就是default主題。但是，其他主題樣式我們能否也能按照element-ui的方式來定義呢？答案是肯定的。現在，我們就在上篇的代碼基礎上來實作這種方式。
為了友善了解，我們可以将上篇編寫的<g-button>作為基礎元件。其他主題的按鈕元件都在此基礎上進行擴充。進入custom-global-component/src/components目錄，建立extendbutton目錄，如下圖：
進入extendbutton目錄下，建立入口檔案index.js、元件檔案extendbutton.vue，如下圖：
打開extendbutton.vue檔案，嘗試編寫一個主題為primary的基礎擴充按鈕元件，如下圖：
擴充元件标簽名為“<et-button>”，具有的主題樣式class名為“primay”。
進入入口檔案index.js，引入extendbut元件模闆，生成名為“et-button”的vue元件并輸出。如下圖：
這樣一個基礎的擴充按鈕元件就完成了。
現在，我們回到src目錄下，嘗試一下我們新編寫的基礎擴充按鈕元件。打開main.js和app.vue檔案，引入并使用這個元件，如下圖：
main.js
app.vue
預覽效果：
這樣，一個primary主題的基礎擴充按鈕元件就完成了。當然，這樣還沒有完成。因為，我們并沒有通過設定元件的type屬性控制按鈕的主題。為了實作這種功能，我們可以做一個工廠方法一樣的元件複用。此時我們就會用到prop來傳遞屬性。
打開extendbutton.vue，進一步修改此檔案。如下圖：
在extendbutton.vue中，添加各種主題樣式，如下圖：
此時我們就可以在app.vue中這樣使用元件了，如下圖：
預覽效果如下圖：
這樣跟element-ui的按鈕元件用法基本一樣了。當然，使用按鈕元件免不了給其綁定事件。直接給自定義元件綁定事件顯然是不行的。需要提前給元件添加on對象和出發其自定義的事件。分别進入button.vue和extendbutton.vue，進一步修改代碼，如下圖：
button.vue
extendbutton.vue
打開app.vue，定義一個測試函數test，給default主題按鈕綁定test，如下圖：
點選default主題按鈕，測試效果，如下圖：
此時在元件中就可以綁定事件了。一個完美的element-ui風格的自定義按鈕元件就完成了。上述代碼我已送出到github，歡迎參考！
<a href="http://mp.weixin.qq.com/s?__biz=mjm5oda2mdiyma==&mid=2247483742&idx=1&sn=ecea6017709404db1b7be116b80f32ca&chksm=a6d1c88d91a6419bd74170dd2878c18baa5b0d2f3402062d8809b195bde5d01352ff36dfe15d&mpshare=1&scene=23&srcid=0615btsxo3lrfyhkvinlwpyj#rd" target="_blank">點選檢視公衆号文章</a>
歡迎關注個人公衆号，檢視更多好文。