造一個「輪子」musionUI

慕晨同學發表於2019-02-28
UI

寫在前面

先放上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標籤頁使用

預覽
造一個「輪子」musionUI
程式碼使用：
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使用

預覽
造一個「輪子」musionUI
程式碼使用
<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. 佈局

預覽
造一個「輪子」musionUI
程式碼使用
<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. 網格元件

預覽
造一個「輪子」musionUI
程式碼使用
<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 –

更多程式碼和文件持續更新中…..

特別緻謝

特別緻謝方方老師。在方應杭老師的指導下，一個一個地實現元件的感覺是非常爽的。

相關文章