先定個小目標： 比方說寫一個Vue元件庫-Radon-UI

乖小鬼發表於2016-08-31
Vue元件UI

Radon -- 孩子的姓名很重要

對於如今競爭如此激烈的前端界來說，出一個元件庫，最重要的事情就是起個吊炸天的名字，什麼狗蛋啊，狗剩啊，雖然好生養，但是容易被鄙視，我們這個元件庫的名字叫Radon（百度百科, Wiki）。

它是一個惰性元素，但它是惰性元素裡面最活躍的一個，正好符合我們的設定，大家為什麼使用元件庫，或者說為什麼用別人的元件庫，因為懶，那為什麼我們團隊來寫這個元件庫呢？因為我們是懶人裡面最勤快（自詡的）的一個，天然匹配，完美！！！同時，Radon具有放射性，能夠散發射線，我們也想用自己的能量，小小的影響下前端的Vuers。

點子從何而來

點子是因為我們要做一個自己的後臺管理系統，但是系統的設計並沒有，只有原型，所以我們要使用別人的元件或者成熟的Css框架來搭建，緊接著是服務端的介面並沒有準備好，哦，不對，應該是還沒有排上日期寫，那麼契機在這裡產生了，也就是說我們還有一段時間可以準備，於是我們產生了這個想法，定了個小目標，先寫元件，後用元件來拼裝我們的系統。這一段關鍵的時間，就這樣產生了，正好 Vue外掛小王子Awe剛來我們公司，他身上沒有任何專案包袱，也不存在歷史包袱，可以全心全意搞這個元件庫，一拍即可，這個庫就這麼走上了歷史的軌跡。

為什麼要自己寫

  • 長期以後，我們受惠於開源世界，各種外掛，元件，各種框架，不計其數的開發人員，幫助我們寫程式碼。現在是時候反饋社群的人，所以我們一直有這麼一個念頭，寫一個開源的東西來回報大家，在這之前，我本人有過幾個小的開源外掛，但這次是我們團隊的產品。

  • 選擇使用Vue來寫一個UI的元件庫，除了我們目前的技術棧是選擇的Vue，還有剛好契合前面我提到的時機，最重要的是目前我們沒有發現更好的Vue的元件庫，所以我們自己需要，大家也應該是需要，這是一個剛需（不管你們信不信，反正我們信了。）

  • 最重要的我們有人員，有能力，也有這個信心出產一個好的元件庫來給大家使用。（不要打我！！！）

Radon--為何牛逼

基本特點

  • 基於 Vue 開發的高質量UI元件
  • 基於 npm + webpack + ES6 + postcss開發
  • 資料驅動，簡單易使用
  • 已經使用在我們自己一些後臺管理系統的專案中，親自驗收過了
  • 我們沒有KPI，這不是KPI開源專案
  • 2種使用方式，一種可以用我們的原始碼，在vue的專案中新建目錄，引用，一種可以使用npm的方式，直接引用，隨你喜歡。

微創新

圖片預覽（ preivew ）

在 Radon UI 中點選圖片或者其他任何元素都可以實現開啟高清圖片的預覽。 使用中只需要在根節點中放置 <rd-preview></rd-preview>,之後就可以在任何元素上使用 v-preview 指令來註冊相應的高清預覽圖片。 比如： 

先定個小目標： 比方說寫一個Vue元件庫-Radon-UI複製程式碼

這樣就完成了圖片的預覽。大概這個樣子

圖片預覽

全域性元件

全域性元件是一類比較特殊的元件，如 Modal，Notification 他們只需要放置在適當位置，在需要的時候彈出或者請求互動即可，不需要重複的註冊、呼叫、銷燬，所以我們的解決方案是將這一類元件放置在根例項中，直接使用父元件的響應式資料物件，這樣任何子元件都可以在業務程式碼中通過我們定義的 Vue 的例項方法來呼叫它們，比如：

通過這一行程式碼，我們就實現了傳送了一個訊息為“編輯成功”的成功狀態，並在3s後自動消失的通知。

 this.$Notification.success('編輯成功', '', 3000)複製程式碼

這裡通過簡單地呼叫 $Modal.create 就可以彈出確認框來請求使用者互動，使用者互動就會相應執行其中的回撥函式。

this.$Modal.create('這裡是標題','這裡應該說點什麼',() => {
  console.log('confirm')
},
() => {
  console.log('cancel')
})複製程式碼

全域性元件在這裡

相容性

相容PC和Mobile， 2邊都可以用， 統一了公司的UI風格，這樣爽不爽。

最後的地址

相關文章