造一個「輪子」musionUI

文章首發於：github.com/USTB-musion…

寫在前面

先放上musionUI的代碼倉庫：musionUI。如今代碼還沒有寫完，大概只完成了30%，持續更新中... 所有代碼完成以後會寫簡單的說明文檔。

造了哪些輪子

• 已經完成的：輸入框、按鈕、響適應佈局、網格，popover、tab標籤頁、手風琴、級聯選擇、collapse摺疊面板
• 還沒有完成的：無縫輪播、Dialog、Notification通知、響應式導航條、分頁、表單驗證、Table、圖片上傳、Sticky、Tree、Suggestion、Datepicker等。

項目特色

1. 使用chai，mocha編寫測試用例，使用karma配置測試環境，每一個組件有豐富的單元測試用例
2. 前期使用parcel方便構建，後期會引用Vue Cli3或者webpack來實現更多功能
3. 使用Travis CI進行持續集成測試
4. 參考如今社區比較成熟如ElementUI，Ant Design，Material UI這些UI輪子的API設計和樣式佈局。
5. 該項目基於Vue2.x版原本開發和使用

把項目跑起來

1. git clone github.com/USTB-musion…
2. cd musion / npm install
3. npm start

說明文檔

import Vue from 'vue'
import Button from './button.vue'
import Icon from './icon.vue'
import ButtonGroup from './button-group.vue'
import Input from './input.vue'
import Row from './row.vue'
import Col from './col.vue'
import Layout from './layout.vue'
import Header from './header.vue'
import Content from './content.vue'
import Sider from './sider.vue'
import Footer from './footer.vue'
import Toast from './toast.vue'
import plugin from './plugin.js'
import Tabs from './tabs.vue'
import TabsHead from './tabs-head.vue'
import TabsBody from './tabs-body.vue'
import TabsPane from './tabs-pane.vue'
import TabsItem from './tabs-item.vue'
import Popover from './popover.vue'
import Collapse from './collapse.vue'
import CollapseItem from './collapse-item.vue'

Vue.component('m-button', Button)
Vue.component('m-icon', Icon)
Vue.component('m-button-group', ButtonGroup)
Vue.component('m-input', Input)
Vue.component('m-row', Row)
Vue.component('m-col', Col)
Vue.component('m-layout', Layout)
Vue.component('m-header', Header)
Vue.component('m-content', Content)
Vue.component('m-sider', Sider)
Vue.component('m-footer', Footer)
Vue.component('m-toast', Toast)
Vue.component('m-tabs', Tabs)
Vue.component('m-tabs-head', TabsHead)
Vue.component('m-tabs-body', TabsBody)
Vue.component('m-tabs-pane', TabsPane)
Vue.component('m-tabs-item', TabsItem)
Vue.component('m-popover', Popover)
Vue.component('m-collapse', Collapse)
Vue.component('m-collapse-item', CollapseItem)
Vue.use(plugin)
複製代碼

組件採用全局註冊，因此直接在頁面中引入便可使用。舉兩個例子：

1.tab標籤頁使用

預覽

代碼使用：

data:{
  selected: '1'
}

<m-tabs :selected="selected">
  <m-tabs-head>
    <m-tabs-item name="1">1</m-tabs-item>
    <m-tabs-item name="2">2</m-tabs-item>
  </m-tabs-head>
  <m-tabs-body>
    <m-tabs-pane name="1">content 1</m-tabs-pane>
    <m-tabs-pane name="2">content 2</m-tabs-pane>
  </m-tabs-body>
</m-tabs>
複製代碼

2.popover使用

預覽

代碼使用

<m-popover trigger="hover">
  <m-button>上方彈出</m-button>
  <template slot="content">
    彈出內容
  </template>
</m-popover>
<m-popover position="bottom" trigger="hover">
  <m-button>下方彈出</m-button>
  <template slot="content">
    彈出內容
  </template>
</m-popover>
<m-popover position="left" trigger="hover">
  <m-button>左邊彈出</m-button>
  <template slot="content">
    彈出內容
  </template>
</m-popover>
<m-popover position="right" trigger="hover">
  <m-button>右邊彈出</m-button>
  <template slot="content">
    彈出內容
  </template>
</m-popover>
複製代碼

屬性使用說明

參數	說明	類型	可選值
trigger	觸發方式	String	click/focus/hover
position	出現位置	String	top/bottom/left/right

3. 佈局

預覽

代碼使用

<m-layout>
  <m-sider>
    sider
  </m-sider>
  <m-layout>
    <m-header>
      header
    </m-header>
    <m-content>
      content
    </m-content>
    <m-footer>
      footer
    </m-footer>
  </m-layout>
</m-layout>
複製代碼

4. 網格組件

預覽

代碼使用

<m-row>
  <m-col span="8">
    <div>8</div>
  </m-col>
  <m-col span="8">
    <div>8</div>
  </m-col>
  <m-col span="8">
    <div>8</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
  <m-col span="6">
    <div>6</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
  <m-col span="4">
    <div>4</div>
  </m-col>
</m-row>

<m-row>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
  <m-col span="2">
    <div>2</div>
  </m-col>
</m-row>
複製代碼

屬性使用說明

參數	說明	類型	可選值
gutter	柵格柵欄	Number	-
span	柵格佔據的列數	Number	-
offset	間隔格數	Number	-

更多代碼和文檔持續更新中.....

特別緻謝

特別緻謝方方老師。在方方老師的指導下，一個一個地實現組件的感受是很是爽的。