Vue造Toast輪子引發的思考

最近一直在不停的造vue輪子，目前已經完成了button、網格布局、預設布局、input等輪子。

今天在編寫toast輪子的時候遇到了乙個問題，說一說我的思考過程，拿出來和大家分享一下，希望對大家有所幫助。?

在決定去造乙個輪子之前，首先要做的就是需求分析，其中最重要的一步就是你的輪子造出來之後，其他人怎樣使用你的輪子。

我希望用到我輪子的使用者可以全域性去呼叫我的輪子，就像下面這樣：

this

.$toast
()

我首先想到的方法是直接將我的輪子掛載到vue的prototype上

import vue from

'vue'
vue.prototype.
$toast
=function()

工程問題：在我們的工程專案中會實際發生的問題，其特點就是具有不可**性，這種不可**性，往往不是你可以通過目前**的分析而得出的。

問題一：$toast可能以前就已經有了

如果以前就存在了乙個$toast，那麼按照你上述的處理方式，你就會覆蓋掉原有的$toast。

針對這個問題，我最初想到的處理方式是提前對$toast進行乙個檢測

import vue from

'vue'
if(vue.prototype.$toast == undefined)
}

問題二：很有可能使用你輪子的使用者和你的vue版本不一致

如果使用你輪子的使用者所用的vue版本和你的不一致怎麼辦？

import vue from

'vue1'
import vue from
'vue2'
......

所以，我們必須要想出合理的方式解決上面遇到的兩個工程問題。

最後通過翻閱vue文件，我發現vue裡面的外掛程式可能很好的解決我所遇到的問題。

建立外掛程式：

export

default
}}

import plugin from

'./toast/plugin'
vue.
use(plugin)

this

.$toast
()

告誡自己，即使再累也不要忘記學習，成功沒有捷徑可走，只有一步接著一步走下去。 共勉！

造輪子 toast元件的實現 下

1.解決 toast 中傳入 html 的問題，通過假的 slot 來實現 plugins.js toast.slots.default message toast.vue 使用 created 2.在 toast 中加 html 是比較危險的乙個動作，所以要加乙個選項預設不開啟。toast.vue...

Vue造輪子 Tabs測試 上

1.點選出現下劃線的問題 tabs item.vue methods tabs.vue mounted tabs head created 為了解決初始化列印出為undefined的問題 tabs.vue 通過兩層迴圈解決找到item mounted 2.找到item之後開始做動畫mounted v...

Vue造輪子 手風琴元件

一.大致的使用方法 內容2內容3 二.完成最外部的樣式 collapse三.進一步調節樣式 collapse item四.預設內容摺疊起來和點選切換，基本樣式和基本功能完成 collapse item data 五.完善功能第乙個點開,第二個就關閉mounted methods else close...