一隻高擴展性的vue組件庫 —— JSMOD

在開發面向用戶站點時，UI 一般由 designer 給出，這時須要組件庫有豐富的自定義樣式能力（同時保留默認提供基礎樣）

基於這點再看大部分的中後臺組件庫並不能知足需求，爲你們介紹一隻高擴展性 UI 組件項目 JSMOD VUE PC

項目相關

1. 文檔|示例

2. Github

一句裝b的目標

提供高自由度（高擴展性）的組件集合，並統一桌面端、移動端的使用方式，是一個面向用戶端的組件庫

王哲君的自定義之路

1、王哲君接了一個農藥管理的項目，在實現需求時使用了JSMOD For Vue 做爲其組件庫，使用確認對話窗時他能夠簡單的使用以下代碼

<mod-alert v-model="show1" content="請注意！墨子已漏電"></mod-alert>

獲得了一個簡單的默認樣式

2、L爸爸以爲藍色的風格他不喜歡，喜歡（河對面的）紅色，且有描邊的樣式

<mod-alert v-model="show1"  content="請注意，墨子已漏電！" 
 :buttonCustomStyle="{background: '#fff', 'borderColor': '#ff5a00', color: '#ff5a00'}"></mod-alert>

經過使用簡單的樣式對象，王哲君知足了L爸爸的訴求

3、暴君是整個項目的 Boss，他但願彈窗的佈局要走非主流，因而設計以下

使用以下代碼，農藥君拿到了他的獎勵buff

<mod-alert v-model="show4" content="墨子漏電！">
    <div class="custom-title" slot="title">
      請注意
    </div>

    <div class="custom-footer" slot="footer">
      <a mod-confirm href="javascript:void(0)">close</a>
    </div>
  </mod-alert>

爲自定義元素加入 mod-confirm 標識便可繼承點擊事件

其餘的自定義方式

JSMOD VUE PC 在設計時爲開發者提供了豐富的自定義樣式（佈局）的方式，甚至你可使用做用域插槽更改組件的 DOM 結構

• 分頁默認提供以下樣式：
  

• 使用做用域插槽你能夠簡單將樣式改成（知足designer）：
  

具體使用方式搓JSMOD PAGINATION查看吧 王者君就不細說了

快節奏的開發

JSMOD VUE PC 提供了對圖片的豐富擴展，你能夠像使用原生標籤同樣使用，同時獲得了以下功能：

• 內置懶加載功能

• 等比縮放（不再用關心產品上傳的圖片不符合規格致使拉伸）

• loading 加載中的動畫、加載完畢的漸變特效都幫你搞定，且能夠自行選擇 loading 圖片，和是否啓用這些功能

• 加載失敗替換圖片（甚至能夠替換爲dom結構），點擊下是否從新加載

訪問 JSMOD IMAGE 模塊看看能不能幫助到你的項目

保持最小集

• jsmod 目前提供的組件比較少，但每一個都是自定義豐富。移除了柵格 字體 圖標等功能（用戶端產品每每都有本身的UI標準），專一提供可擴展的組件庫

• 40k（gizp）的體積（包括了全部的js，css，icon，svg）打包到單一 js，讓你隨意使用

王哲君想說的

1. Mobile 版本正在開發中，目標提供統一的vue組件使用體驗

2. 加入awesome-vue，提供了 Chinese English 文檔

3. 持續更新組件但保持裝B的目標不變提供高自由度（高擴展性）的組件集合