整理常用的一些Vue組件，我們也來造造輪子

我認為獨處是美好的，可以從別人和事務中抽離出來，我十分享受這種感覺。

最近不那麼焦慮了，雖然還是很忙，但是總算周末的時間是有的。我可以玩會手機，看下股票走勢，帶上耳機聽聽音樂。整理一些代碼。

最近，打算整理之前寫過的一些Vue組件；然後，從周三晚上開始，每晚整理1~2個組件，已經整理了6個。做了demo，寫了簡單的參數文檔。斷斷續續，會繼續整理完善。

這份組件，是我工作中常用到的；開發時，考慮了移動端、Pad端、PC端的展示；算是一份響應式的Vue組件吧！

考慮到開發方便，部分用的頻繁的組件註冊到全局（如：Toast），因此可以直接用js調用組件。

Github地址：coocssweb/coo-vue

Demo地址：coo-vue 響應式組件庫

/*****2017.12.02更新****/

八：Vue水波漣漪組件；

這個效果比較像material ui裡面的按鈕特效。部分需要為圖片、按鈕、列表等等元素添加點擊效果的可以用下；它是一個容器，所以理論上如果你願意你可以往裡面添加任何內容

預覽地址：coo-vue 水波漣漪容器組件

如何使用？

<coo-ripple> <a href="javasript:;">模擬水波漣漪效果</a></coo-ripple>

/*****以下是正文****/

一：Vue響應式地區選擇器；

相信只要涉及的用戶信息維護，都會有這樣的需求。

預覽地址：coo-vue 地區選擇器組件

PC端的樣子：

移動端的樣子：

如何使用？

<coo-area-select :province="{}" :city="{}" :country="{}" @select="handleSelectArea"></coo-area-select>

二：Vue 響應式 Swiper組件

相信這個需求基本上每個項目都會用到，它支持定義pagination、支持移動端滑動切換；

註：這個組件沒有基於任何第三方組件開發，因為工作中並沒有垂直方向、3d切換效果的所以目前未完善這些特性；（第三方組件swiper.js 80~100kb 這也太大了）

演示地址：Vue Swiper組件

做的一個簡單的domo：

如何使用？

<coo-swiper :loop="true"> <coo-swiper-item> ..... </coo-swiper-item> <coo-swiper-item> ..... </coo-swiper-item></coo-swiper>

三： Vue Toast 消息組件

這是最最最最經常要用到的，在一個項目中非常多地方會用到，因此將Toast方法註冊到全局，方便業務開發中直接用js調取，而不是用更改data數據的形式調取

演示地址： Vue Toast消息組件

它大概的的樣子？

如何使用？

this.$toast({ type: "success", message: "提示信息", timeout: 3000 });

四：Vue 響應式彈出框組件

這應該用的更加普遍了，提示、彈出框、確認框等等等等！都可以基於這個組件進行開發。

演示地址：Vue彈出框組件

基礎樣式：

成功提示框樣式：

五：Vue 圖片懶載入組件

圖片懶載入，一般在載入大圖片、gif圖片、一個頁面有很多圖片的時候會用到。

這個組件支持定義：預覽圖、是否主動載入、是否顯示載入菊花、Gif預載入

演示地址： Vue 圖片懶載入組件

比如gif的懶載入長的樣子如下：

如何使用？

<coo-lazy-img src="http://www.shuxia123.com/upload_images/test.gif" thumb="http://www.shuxia123.com/upload_images/test.jpg" />

六：Vue 響應式百度地圖組件

這個.....看項目吧！反正是整理出來了，按需載入

演示地址：Vue 百度地圖組件

他的大概樣子：

如何使用？

<coo-map :latitude="24.506045" :longitude="118.131161" :showLay="true" title="測試標題" address="測試地址詳細" appkey="6d5e1930c887a194bb71db14cf6a68e7" :height="300"></coo-map>

七：Vue響應式上傳組件；

這個大家也經常用到，它支持定義：圖片、最多上傳幾張、是否只讀等等等

註：這個組件還不完善，目前還少：（1）大圖預覽；（2）刪除確認

演示地址：Vue 上傳組件

他的大概樣子：

如何使用？

<coo-uploader :length="10":files="["https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1340925344,145113786&fm=27&gp=0.jpg", "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=602288768,1056696022&fm=27&gp=0.jpg"]":readonly="false"></coo-uploader>

總結：

大概就是這樣，接下來會比較有時間，會補充好文檔，整理更多的組件。