npm 安裝
推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。javascript
npm i mint-ui -S
CDN
目前能夠經過 unpkg.com/mint-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 文件便可開始使用。php
<!-- 引入樣式 --><linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><scriptsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
Hello world
經過 CDN 的方式咱們能夠很容易地使用 Mint UI 寫出一個 Hello world 頁面。css
<!DOCTYPE html><html><head>
<metacharset="UTF-8">
<!-- 引入樣式 -->
<linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<divid="app">
<mt-button@click.native="handleClick">按鈕</mt-button>
</div></body>
<!-- 先引入 Vue -->
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<scriptsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>new Vue({ el: '#app', methods: { handleClick: function() { this.$toast('Hello world!') } } }) </script></html>
若是是經過 npm 安裝,並但願配合 webpack 使用,請閱讀下一節:快速上手。html
關於事件綁定vue
在 Vue 2.0 中,爲自定義組件綁定原生事件必須使用 .native
修飾符:java
<my-component @click.native="handleClick">Click Me</my-component>
從易用性的角度出發,咱們對 Button
組件進行了處理,使它能夠監聽 click
事件:webpack
<mt-button@click="handleButtonClick">Click Me</mt-button>
.native
修飾符。
快速上手
本節將介紹如何在項目中使用 Mint UI。nginx
使用 vue-cli
npm install -g vue-cli
vue init webpack projectname
引入 Mint UI
你能夠引入整個 Mint UI,或是根據須要僅引入部分組件。咱們先介紹如何引入完整的 Mint UI。git
完整引入
在 main.js 中寫入如下內容:github
import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
以上代碼便完成了 Mint UI 的引入。須要注意的是,樣式文件須要單獨引入。
按需引入
藉助 babel-plugin-component,咱們能夠只引入須要的組件,以達到減少項目體積的目的。
首先,安裝 babel-plugin-component:
npm install babel-plugin-component -D
而後,將 .babelrc 修改成:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
若是你只但願引入部分組件,好比 Button 和 Cell,那麼須要在 main.js 中寫入如下內容:
import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫爲 * Vue.use(Button) * Vue.use(Cell) */
new Vue({
el: '#app',
components: { App }
})
開始使用
至此,一個基於 Vue 和 Mint UI 的開發環境已經搭建完畢,如今就能夠編寫代碼了。啓動開發模式:
npm run dev
編譯:
npm run build
Toast
簡短的消息提示框,支持自定義位置、持續時間和樣式。
引入
import { Toast } from 'mint-ui';
例子
基本用法
Toast('提示信息');
在調用 Toast
時傳入一個對象便可配置更多選項
Toast({
message: '提示',
position: 'bottom',
duration: 5000
});
若需在文字上方顯示一個 icon 圖標,能夠將圖標的類名做爲 iconClass
的值傳給 Toast
(圖標需自行準備)
Toast({
message: '操做成功',
iconClass: 'icon icon-success'
});
執行 Toast
方法會返回一個 Toast
實例,每一個實例都有 close
方法,用於手動關閉 Toast
let instance = Toast('提示信息');
setTimeout(() => {
instance.close();
}, 2000);
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
message | 文本內容 | String | ||
position | Toast 的位置 | String | 'top' 'bottom' 'middle' |
'middle' |
duration | 持續時間(毫秒),若爲 -1 則不會自動關閉 | Number | 3000 | |
className | Toast 的類名。能夠爲其添加樣式 | String | ||
iconClass | icon 圖標的類名 | String |
下拉/上拉刷新,支持自定義 HTML 模板。
引入
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
例子
<mt-loadmore:top-method="loadTop":bottom-method="loadBottom":bottom-all-loaded="allLoaded"ref="loadmore"><ul><liv-for="item in list">{{ item }}</li></ul></mt-loadmore>
以列表頂部的下拉刷新爲例:按住列表,下拉必定距離(經過 topDistance
配置)後釋放,被指定爲 top-method
的方法就會執行
loadTop() {
...// 加載更多數據
this.$refs.loadmore.onTopLoaded();
}
注意在這個方法的最後須要手動調用 loadmore
的 onTopLoaded
事件。這是由於在加載數據後須要對組件進行一些從新定位的操做。
列表底部的上拉刷新與之相似
loadBottom() {
...// 加載更多數據
this.allLoaded = true;// 若數據已所有獲取完畢
this.$refs.loadmore.onBottomLoaded();
}
惟一的區別是,當底部數據所有獲取完畢時,能夠將綁定到組件 bottom-all-loaded
屬性的變量賦值爲 true
,這樣 bottom-method
就不會再次執行了。
手指在屏幕上滑動的距離與組件實際移動的距離比值能夠經過 distance-index
參數配置,默認值爲 2。
自定義 HTML 模板
能夠爲列表頂部和底部的加載提示區域提供自定義的 HTML 模板
<template>
<mt-loadmore:top-method="loadTop"@top-status-change="handleTopChange"><ul><liv-for="item in list">{{ item }}</li></ul><divslot="top"class="mint-loadmore-top"><spanv-show="topStatus !== 'loading'":class="{ 'rotate': topStatus === 'drop' }">↓</span><spanv-show="topStatus === 'loading'">Loading...</span></div></mt-loadmore></template><script>exportdefault { data() { return { topStatus: '', // ... }; }, methods: { handleTopChange(status) { this.topStatus = status; }, // ... }, // ... }; </script>
好比須要配置列表頂部的 HTML,則須要爲自定義 HTML 模板的最外層標籤設置 slot
屬性爲 top
,類名爲 mint-loadmore-top
。當用戶滑動組件時,組件會有如下幾個狀態:
pull
:組件已經被按下,但按下的距離未達到topDistance
,此時釋放不會觸發top-method
,列表會回到初始位置drop
:按下的距離不小於topDistance
,此時釋放會觸發top-method
loading
:組件已被釋放,top-method
正在執行 每當組件的狀態發生變化時,loadmore
都會觸發top-status-change
方法,參數爲組件目前的狀態。所以能夠像本例同樣,使用一個handleTopChange
方法來處理組件狀態的變化。
配置加載提示區域的文字
在不使用自定義 HTML 模板的狀況下,能夠配置 loadmore
自己自帶的加載提示區域的文字。以列表頂部爲例,對應於 status
的三個狀態,可配置的屬性依次爲 topPullText
、topDropText
和 topLoadingText
。與之對應的底部屬性爲 bottomPullText
、bottomDropText
和 bottomLoadingText
。
自動檢測
loadmore
在初始化時會自動檢測它的高度是否可以撐滿其容器,若是不能則會調用 bottom-method
,直到撐滿容器爲止。若是不但願使用這一機制,能夠將 auto-fill
設爲 false
。
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
autoFill | 若爲真,loadmore 會自動檢測並撐滿其容器 |
Boolean | true | |
distanceIndex | 手指移動與組件移動距離的比值 | Number | 2 | |
maxDistance | 組件可移動的最大距離(像素),若爲 0 則不限制 | Number | 0 | |
topPullText | topStatus 爲 pull 時加載提示區域的文字 |
String | '下拉刷新' | |
topDropText | topStatus 爲 drop 時加載提示區域的文字 |
String | '釋放更新' | |
topLoadingText | topStatus 爲 loading 時加載提示區域的文字 |
String | '加載中...' | |
topDistance | 觸發 topMethod 的下拉距離閾值(像素) |
Number | 70 | |
topMethod | 下拉刷新執行的方法 | Function | ||
bottomPullText | bottomStatus 爲 pull 時加載提示區域的文字 |
String | '上拉刷新' | |
bottomDropText | bottomStatus 爲 drop 時加載提示區域的文字 |
String | '釋放更新' | |
bottomLoadingText | bottomStatus 爲 loading 時加載提示區域的文字 |
String | '加載中...' | |
bottomDistance | 觸發 bottomMethod 的上拉距離閾值(像素) |
Number | 70 | |
bottomMethod | 上拉刷新執行的方法 | Function | ||
bottomAllLoaded | 若爲真,則 bottomMethod 不會被再次觸發 |
Boolean | false |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
top-status-change | 組件頂部狀態發生變化時的回調函數 | 組件頂部的新狀態名 |
bottom-status-change | 組件底部狀態發生變化時的回調函數 | 組件底部的新狀態名 |
Slot
name | 描述 |
---|---|
- | 數據列表 |
top | 自定義頂部加載提示區域 HTML 模板 |
bottom | 自定義底部加載提示區域 HTML 模板 |
無限滾動指令。
引入
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
例子
爲 HTML 元素添加 v-infinite-scroll
指令便可使用無限滾動。滾動該元素,當其底部與被滾動元素底部的距離小於給定的閾值(經過 infinite-scroll-distance
設置)時,綁定到 v-infinite-scroll
指令的方法就會被觸發。
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<liv-for="item in list">{{ item }}</li></ul>
loadMore() {
this.loading = true;
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 2500);
}
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
infinite-scroll-disabled | 若爲真,則無限滾動不會被觸發 | Boolean | false | |
infinite-scroll-distance | 觸發加載方法的滾動距離閾值(像素) | Number | 0 | |
infinite-scroll-immediate-check | 若爲真,則指令被綁定到元素上後會當即檢查是否須要執行加載方法。在初始狀態下內容有可能撐不滿容器時十分有用。 | Boolean | true | |
infinite-scroll-listen-for-event | 一個 event,被執行時會當即檢查是否須要執行加載方法。 | Function |
彈出式提示框,有多種交互形式。
引入
import { MessageBox } from 'mint-ui';
例子
以標題與內容字符串爲參數進行調用
MessageBox('提示', '操做成功');
或者傳入一個對象
MessageBox({
title: '提示',
message: '肯定執行此操做?',
showCancelButton: true
});
此外,MessageBox
還提供了 alert
、confirm
和 prompt
三個方法,它們都返回一個 Promise
MessageBox.alert(message, title);
MessageBox.alert('操做成功').then(action => {
...
});
MessageBox.confirm(message, title);
MessageBox.confirm('肯定執行此操做?').then(action => {
...
});
MessageBox.prompt(message, title);
MessageBox.prompt('請輸入姓名').then(({ value, action }) => {
...
});
在 prompt 中,若用戶點擊了取消按鈕,則 Promise 的狀態會變爲 rejected
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
title | 提示框的標題 | String | ||
message | 提示框的內容 | String | ||
showConfirmButton | 是否顯示確認按鈕 | Boolean | true | |
showCancelButton | 是否顯示取消按鈕 | Boolean | false | |
confirmButtonText | 確認按鈕的文本 | String | ||
confirmButtonHighlight | 是否將確認按鈕的文本加粗顯示 | Boolean | false | |
confirmButtonClass | 確認按鈕的類名 | String | ||
cancelButtonText | 取消按鈕的文本 | String | ||
cancelButtonHighlight | 是否將取消按鈕的文本加粗顯示 | Boolean | false | |
cancelButtonClass | 取消按鈕的類名 | String | ||
closeOnClickModal | 是否在點擊遮罩時關閉提示光 | Boolean | true (alert 爲 false) | |
showInput | 是否顯示一個輸入框 | Boolean | false | |
inputType | 輸入框的類型 | String | 'text' | |
inputValue | 輸入框的值 | String | ||
inputPlaceholder | 輸入框的佔位符 | String |
Action sheet
操做表,從屏幕下方移入。
引入
import { Actionsheet } from 'mint-ui';
Vue.component(Actionsheet.name, Actionsheet);
例子
actions
屬性綁定一個由對象組成的數組,每一個對象有 name
和 method
兩個鍵,name
爲菜單項的文本,method
爲點擊該菜單項的回調函數。
將 v-model
綁定到一個本地變量,經過操做這個變量便可控制 actionsheet
的顯示與隱藏。
<mt-actionsheet:actions="actions"v-model="sheetVisible"></mt-actionsheet>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
actions | 菜單項數組 | Array | ||
cancelText | 取消按鈕的文本。若設爲空字符串,則不顯示取消按鈕 | String | '取消' | |
closeOnClickModal | 是否能夠經過點擊 modal 層來關閉 actionsheet |
Boolean | true |
Popup
彈出框,可自定義內容。
引入
import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);
例子
position
屬性指定了 popup
的位置。好比,position
爲 'bottom' 時,popup
會從屏幕下方移入,並最終固定在屏幕下方。移入/移出的動效會根據 position
的不一樣而自動改變,無需手動配置。
將 v-model
綁定到一個本地變量,經過操做這個變量便可控制 popup
的顯示與隱藏。
<mt-popupv-model="popupVisible"position="bottom">
...
</mt-popup>
若省略 position
屬性,則 popup
會相對於屏幕居中顯示(若不想讓其居中,可經過 CSS 對其從新定位)。此時建議將動效設置爲 popup-fade
,這樣在顯示/隱藏時會有淡入/淡出效果。
<mt-popupv-model="popupVisible"popup-transition="popup-fade">
...
</mt-popup>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
position | popup 的位置。省略則居中顯示 |
String | 'top' 'right' 'bottom' 'left' |
|
pop-transition | 顯示/隱藏時的動效,僅在省略 position 時可配置 |
String | 'popup-fade' | |
modal | 是否建立一個 modal 層 | Boolean | true | |
closeOnClickModal | 是否能夠經過點擊 modal 層來關閉 popup |
Boolean | true |
Slot
name | 描述 |
---|---|
- | 彈出框的內容 |
Swipe
輪播圖,可自定義輪播時間間隔、動畫時長等。
引入
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
例子
基礎用法
<mt-swipe:auto="4000">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
隱藏 indicators
<mt-swipe:show-indicators="false">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
取消自動播放
<mt-swipe:auto="0">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
change
事件
輪播圖切換時會觸發 change
事件,參數爲切入輪播圖的索引
<mt-swipe@change="handleChange">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
methods: {
handleChange(index) {
...
}
}
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
speed | 動畫持時(毫秒) | Number | 300 | |
auto | 自動播放的時間間隔(毫秒) | Number | 3000 | |
defaultIndex | 初始顯示的輪播圖的索引 | Number | 0 | |
continuous | 是否能夠循環播放 | Boolean | true | |
showIndicators | 是否顯示 indicators | Boolean | true | |
prevent | 是否在 touchstart 事件觸發時阻止事件的默認行爲。設爲 true 可提升運行在低版本安卓瀏覽器時的性能 | Boolean | false | |
stopPropagation | 是否在 touchstart 事件觸發時阻止冒泡。 | Boolean | false |
Slot
mt-swipe
name | 描述 |
---|---|
- | 一個或多個 mt-swipe-item 組件 |
mt-swipe-item
name | 描述 |
---|---|
- | 單個輪播圖的內容 |
Lazy load
圖片懶加載指令。
引入
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
例子
爲 img
元素添加 v-lazy
指令,指令的值爲圖片的地址。同時須要設置圖片在加載時的樣式。
<ul>
<liv-for="item in list">
<imgv-lazy="item">
</li></ul>
image[lazy=loading] {
width: 40px;
height: 300px;
margin: auto;
}
v-lazy
指
Range
滑塊,支持自定義步長、區間等。
引入
import { Range } from 'mint-ui';
Vue.component(Range.name, Range);
例子
將一個本地變量與 range
的 value
屬性同步便可實現雙向綁定
<mt-rangev-model="rangeValue"></mt-range>
更多的配置項
<mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5"></mt-range>
可在滑塊兩側顯示文字
<mt-rangev-model="rangeValue">
<divslot="start">0</div>
<divslot="end">100</div></mt-range>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 滑塊的值 | Number | ||
min | 最小值 | Number | 0 | |
max | 最大值 | Number | 100 | |
step | 步長 | Number | 1 | |
disabled | 是否禁用 | Boolean | false | |
barHeight | 滑槽的線寬(像素) | Number | 1 |
Slot
name | 描述 |
---|---|
start | 滑塊左側 DOM |
end | 滑塊右側 DOM |
Progress
進度條。
引入
import { Progress } from 'mint-ui';
Vue.component(Progress.name, Progress);
例子
傳入 value
做爲進度條的值。可自定義它的線寬
<mt-progress :value="20" :bar-height="5"></mt-progress>
可在進度條兩側顯示文字
<mt-progress:value="60">
<divslot="start">0%</div>
<divslot="end">100%</div></mt-progress>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 進度條的值(%) | Number | ||
barHeight | 進度條的線寬(像素) | Number | 1 |
Slot
name | 描述 |
---|---|
start | 進度條左側 DOM |
end | 進度條右側 DOM |
Picker
選擇器,支持多 slot 聯動。
引入
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
例子
傳入 slots
,當被選中的值發生變化時觸發 change
事件。change
事件有兩個參數,分別爲當前 picker
的 vue 實例和各 slot 被選中的值組成的數組
<mt-picker:slots="slots"@change="onValuesChange"></mt-picker>
export default {
methods: {
onValuesChange(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
}
},
data() {
return {
slots: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
]
};
}
};
change
事件
在 change
事件中,可使用註冊到 picker
實例上的一些方法:
- getSlotValue(index):獲取給定 slot 目前被選中的值
- setSlotValue(index, value):設定給定 slot 被選中的值,該值必須存在於該 slot 的備選值數組中
- getSlotValues(index):獲取給定 slot 的備選值數組
- setSlotValues(index, values):設定給定 slot 的備選值數組
- getValues():獲取全部 slot 目前被選中的值(分隔符 slot 除外)
- setValues(values):設定全部 slot 被選中的值(分隔符 slot 除外),該值必須存在於對應 slot 的備選值數組中
slots
綁定到 slots
屬性的數組由對象組成,每一個對象都對應一個 slot,它們有以下鍵名
key | 描述 |
---|---|
divider | 對應 slot 是否爲分隔符 |
content | 分隔符 slot 的顯示文本 |
values | 對應 slot 的備選值數組。若爲對象數組,則需在 mt-picker 標籤上設置 value-key 屬性來指定顯示的字段名 |
defaultIndex | 對應 slot 初始選中值,需傳入其在 values 數組中的序號,默認爲 0 |
textAlign | 對應 slot 的對齊方式 |
flex | 對應 slot CSS 的 flex 值 |
className | 對應 slot 的類名 |
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
slots | slot 對象數組 | Array | [] | |
valueKey | 當 values 爲對象數組時,做爲文本顯示在 Picker 中的對應字段的字段名 | String | '' | |
showToolbar | 是否在組件頂部顯示一個 toolbar,內容自定義 | Boolean | false | |
visibleItemCount | slot 中可見備選值的個數 | Number | 5 | |
itemHeight | 每一個 slot 的高度 | Number | 36 |
Slot
name | 描述 |
---|---|
- | 當 showToolbar 爲 true 時,toolbar 中的內容 |
Datetime picker
日期時間選擇器,支持自定義類型。
引入
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
例子
v-model
屬性爲組件的綁定值。
type
屬性表示 datetime-picker
組件的類型,它有三個可能的值:
datetime
: 日期時間選擇器,可選擇年、月、日、時、分,value
值爲一個Date
對象date
: 日期選擇器,可選擇年、月、日,value
值爲一個Date
對象time
: 時間選擇器,可選擇時、分,value
值爲一個格式爲HH:mm
的字符串
datetime-picker
提供了兩個供外部調用的方法:open
和 close
,分別用於打開和關閉選擇器。
<template>
<mt-datetime-pickerref="picker"type="time"v-model="pickerValue">
</mt-datetime-picker></template>
<script>exportdefault { methods: { openPicker() { this.$refs.picker.open(); } } }; </script>
能夠爲選項提供自定義模板。模板須爲一個包含了 {value}
的字符串,{value}
會被解析爲相應選項的值。
<mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>
當點擊確認按鈕時會觸發 confirm
事件,參數爲當前 value 的值。
<mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm"></mt-datetime-picker>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 組件的類型 | String | 'datetime', 'date', 'time' | 'datetime' |
cancelText | 取消按鈕文本 | String | '取消' | |
confirmText | 肯定按鈕文本 | String | '肯定' | |
startDate | 日期的最小可選值 | Date | 十年前的 1 月 1 日 | |
endDate | 日期的最大可選值 | Date | 十年後的 12 月 31 日 | |
startHour | 小時的最小可選值 | Number | 0 | |
endHour | 小時的最大可選值 | Number | 23 | |
yearFormat | 年份模板 | String | '{value}' | |
monthFormat | 月份模板 | String | '{value}' | |
dateFormat | 日期模板 | String | '{value}' | |
hourFormat | 小時模板 | String | '{value}' | |
minuteFormat | 分鐘模板 | String | '{value}' |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
confirm | 點擊確認按鈕時的回調函數 | 目前的選擇值 |
Index List
索引列表,可由右側索引導航快速定位到相應的內容。
引入
import { IndexList, IndexSection } from 'mint-ui';
Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);
例子
<mt-index-list>
<mt-index-sectionindex="A">
<mt-celltitle="Aaron"></mt-cell>
<mt-celltitle="Alden"></mt-cell>
<mt-celltitle="Austin"></mt-cell>
</mt-index-section>
<mt-index-sectionindex="B">
<mt-celltitle="Baldwin"></mt-cell>
<mt-celltitle="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-sectionindex="Z">
<mt-celltitle="Zack"></mt-cell>
<mt-celltitle="Zane"></mt-cell>
</mt-index-section></mt-index-list>
mt-index-section
與右側導航中的索引一一對應,mt-index-section
的 index
屬性即爲與其對應的索引的顯示文本。mt-index-section
標籤內可爲任意自定義內容。
當手指在右側導航中滑動時,會在列表中間顯示一個目前索引值的提示符。若不須要提示符,只需將 show-indicator
設爲 false
<mt-index-list :show-indicator="false">
...
</mt-index-list>
API
mt-index-list
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
height | 組件的高度。若不指定,則自動延伸至視口底 | Number | ||
showIndicator | 是否顯示索引值提示符 | Boolean | true |
mt-index-section
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
index | 索引值(必需參數) | String |
Slot
mt-index-list
name | 描述 |
---|---|
- | 一個或多個 mt-index-section 組件 |
mt-index-section
name | 描述 |
---|---|
- | 單個 mt-index-section 的內容 |
調色板按鈕
引入
import { PaletteButton } from 'mint-ui';
Vue.component(PaletteButton.name, PaletteButton);
例子
基本用法
<mt-palette-button content="+">
<divclass="my-icon-button"></div>
<div class="my-icon-button"></div>
<div class="my-icon-button"></div>
</mt-palette-button>
設置參數和事件,以及手動觸發事件
methods: {
main_log(val) {
console.log('main_log', val);
},
sub_log(val) {
console.log('sub_log', val);
this.$refs.target_1.collapse();
}
}
<mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')" direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;" style="left:30px;">
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
</mt-palette-button>
選項
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
content | 主按鈕內容 | String | ||
offset | 角度偏移量 | Number | Math.PI / 4 | |
direction | 按鈕展開方向 | string | lt, t, rt, r, rb, b, lb, l | lt |
radius | 按鈕展開半徑 | Number | 90 | |
mainButtonStyle | 主按鈕樣式 | String |
方法
方法名 | 說明 |
---|---|
toggle | 切換按鈕展開/收起狀態 |
expand | 展開按鈕 |
collapse | 收起按鈕 |
事件
事件名 | 說明 |
---|---|
expand | 按鈕開始展開 |
expanded | 按鈕徹底展開(動畫效果執行結束) |
collapse | 按鈕開始收起 |
Header
頂部導航欄,支持顯示按鈕、自定義文字和固定在頂部。
引入
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
例子
固定在頁面頂部
<mt-headerfixedtitle="固定在頂部"></mt-header>
設置 left
或 right
slot
<mt-headertitle="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-linkto="/"slot="left">
<mt-buttonicon="back">返回</mt-button>
</router-link>
<mt-buttonicon="more"slot="right"></mt-button></mt-header>
設置多個按鈕
<mt-headertitle="多個按鈕">
<router-linkto="/"slot="left">
<mt-buttonicon="back">返回</mt-button>
<mt-button@click="handleClose">關閉</mt-button>
</router-link>
<mt-buttonicon="more"slot="right"></mt-button></mt-header>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面頂部 | Boolean | false | |
title | 標題 | String |
Slot
name | 描述 |
---|---|
left | 左邊顯示元素 |
right | 右邊顯示元素 |
Tabbar
底部選項卡,點擊 tab 會切換顯示的頁面。依賴 tab-item 組件。
引入
import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 組件使用
<mt-tabbarv-model="selected">
<mt-tab-itemid="外賣">
<imgslot="icon"src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-itemid="訂單">
<imgslot="icon"src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-itemid="發現">
<imgslot="icon"src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-itemid="個人">
<imgslot="icon"src="../assets/100x100.png">
個人
</mt-tab-item></mt-tabbar>
API
tabbar
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面底部 | Boolean | false | |
value | 返回當前選中的 tab-item 的 id | * |
tab-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | 選中後的返回值 | * |
Slot
tabbar
name | 描述 |
---|---|
- | 內容 |
tab-item
name | 描述 |
---|---|
- | 顯示文字 |
icon | icon 圖標 |
Navbar
頂部選項卡,與 Tabbar 相似,依賴 tab-item 組件。
引入
import { Navbar, TabItem } from 'mint-ui';
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 組件使用
<mt-navbarv-model="selected">
<mt-tab-itemid="1">選項一</mt-tab-item>
<mt-tab-itemid="2">選項二</mt-tab-item>
<mt-tab-itemid="3">選項三</mt-tab-item></mt-navbar>
<!-- tab-container --><mt-tab-containerv-model="selected">
<mt-tab-container-itemid="1">
<mt-cellv-for="n in 10":title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-itemid="2">
<mt-cellv-for="n in 4":title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-itemid="3">
<mt-cellv-for="n in 6":title="'選項 ' + n" />
</mt-tab-container-item></mt-tab-container>
API
navbar
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面頂部 | Boolean | false | |
value | 返回當前選中的 tab-item 的 id | * |
tab-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | 選中後的返回值 | * |
Slot
navbar
name | 描述 |
---|---|
- | 內容 |
tab-item
name | 描述 |
---|---|
- | 顯示文字 |
icon | icon 圖標 |
Button
按鈕,提供幾種基礎樣式和尺寸,可自定義圖標。
引入
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);
例子
改變顏色
<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>
改變大小
<mt-buttonsize="small">small</mt-button><mt-buttonsize="large">large</mt-button><mt-buttonsize="normal">normal</mt-button>
禁用按鈕
<mt-buttondisabled>disabled</mt-button>
幽靈按鈕
<mt-buttonplain>plain</mt-button>
帶圖標
<mt-buttonicon="back">back</mt-button><mt-buttonicon="more">更多</mt-button>
自定義圖標
<mt-button>
<imgsrc="../assets/100x100.png"height="20"width="20"slot="icon">
帶自定義圖標
</mt-button>
綁定 click 事件
<mt-button@click.native="handleClick">點擊觸發 handleClick</mt-button>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
plain | 幽靈按鈕 | Boolean | false | |
disabled | 禁用狀態 | Boolean | false | |
type | 按鈕顯示樣式 | String | default, primary, danger | default |
size | 尺寸 | String | small, normal, large | normal |
icon | 圖標 | String | more, back |
Slot
name | 描述 |
---|---|
- | 顯示的文本內容 |
icon | 自定義顯示的圖標 |
Cell
單元格,可用做展現列表信息、連接或者表單等。
引入
import { Cell } from 'mint-ui';
Vue.component(Cell.name, Cell);
例子
基礎用法
<mt-celltitle="標題文字"></mt-cell><mt-celltitle="標題文字"value="說明文字"></mt-cell>
可點擊的連接
<mt-celltitle="標題文字"to="//github.com"is-linkvalue="帶連接"></mt-cell>
帶圖標
<mt-celltitle="標題文字"icon="more"value="帶 icon"></mt-cell>
帶自定義圖標
<mt-celltitle="標題文字">
<span>icon 是圖片</span>
<imgslot="icon"src="../assets/100x100.png"width="24"height="24"></mt-cell>
自定義內容
<mt-celltitle="標題文字"is-link>
<spanstyle="color: green">這裏是元素</span></mt-cell>
帶備註信息
<mt-celltitle="標題"label="描述信息"is-link></mt-cell>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
icon | 圖標 | String | back, more | |
title | 標題 | String | ||
to | 跳轉連接 | String | ||
value | 內容 | * | ||
label | 備註信息,顯示在標題下方 | String | ||
is-link | 連接,會顯示箭頭圖標。搭配 to 屬性使用 | Boolean |
Slot
name | 描述 |
---|---|
- | 自定義顯示內容 |
title | 自定義標題 |
icon | 自定義圖標 |
Cell Swipe
可滑動的單元格,用法同 cell。
引入
import { CellSwipe } from 'mint-ui';
Vue.component(CellSwipe.name, CellSwipe);
例子
增長右滑動按鈕
<mt-cell-swipe title="標題文字" :right="[ { content: 'Delete', style: { background: 'red', color: '#fff' }, handler: () => this.$messagebox('delete') } ]"></mt-cell-swipe>
content
能夠是 HTML 或者純文本。
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
icon | 圖標 | String | back, more | |
title | 標題 | String | ||
to | 跳轉連接 | String | ||
value | 內容 | * | ||
label | 備註信息,顯示在標題下方 | String | ||
is-link | 連接,會顯示箭頭圖標。搭配 to 屬性使用 | Boolean | ||
left | 按鈕組, { content, style, handler } |
Object[] | ||
right | 按鈕組, { content, style, handler } |
Object[] |
Slot
name | 描述 |
---|---|
- | 自定義顯示內容 |
title | 自定義標題 |
icon | 自定義圖標 |
Spinner
加載動畫,可指定顯示類型、尺寸和顏色。
引入
import { Spinner } from 'mint-ui';
Vue.component(Spinner.name, Spinner);
例子
指定類型
<mt-spinner type="snake"></mt-spinner><mt-spinnertype="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinnertype="fading-circle"></mt-spinner>
<!-- 或者接受傳入類型的序號 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>
指定顏色
<mt-spinnercolor="#26a2ff"></mt-spinner><mt-spinnercolor="rgb(100, 100, 100)"></mt-spinner><mt-spinnercolor="yellow"></mt-spinner>
指定尺寸
<mt-spinner :size="60"></mt-spinner>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 顯示類型,提供四種風格,能夠指定名稱或者序號 | String、Number | snake double-bounce triple-bounce fading-circle |
snake |
color | 顏色,接受 hex、rgb 等顏色值 | String | #ccc | |
size | 尺寸,單位 px | Number | 28 |
tab-container
面板,可切換顯示子頁面。
引入
import { TabContainer, TabContainerItem } from 'mint-ui';
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
例子
改變 ative 的值,與 <tab-container-item>
的 id 一致即顯示對應頁面。
<mt-tab-containerv-model="active">
<mt-tab-container-itemid="tab-container1">
<mt-cellv-for="n in 10"title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-itemid="tab-container2">
<mt-cellv-for="n in 5"title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-itemid="tab-container3">
<mt-cellv-for="n in 7"title="tab-container 3"></mt-cell>
</mt-tab-container-item></mt-tab-container>
API
tab-container
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 當前激活的 id | * | ||
swipeable | 顯示滑動效果 | Boolean | false |
tab-container-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | item 的 id | * |
Slot
tab-container
name | 描述 |
---|---|
- | 內容 |
tab-container-item
name | 描述 |
---|---|
- | 內容 |
Search
搜索框,可顯示搜索結果列表。
引入
import { Search } from 'mint-ui';
Vue.component(Search.name, Search);
例子
基礎用法
<mt-searchv-model="value"></mt-search>
設置顯示文字
<mt-searchv-model="value"cancel-text="取消"placeholder="搜索"></mt-search>
帶搜索結果
<mt-searchv-model="value":result.sync="result"></mt-search>
自定義搜索結果
<mt-search v-model="value">
<mt-cell v-for="item in result" :title="item.title" :value="item.value">
</mt-cell></mt-search>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 搜索結果綁定值 | String | ||
cancel-text | 取消按鈕文字 | String | 取消 | |
placeholder | 搜索框佔位內容 | String | 搜索 | |
result | 搜索結果列表 | Array | ||
autofocus | 自動聚焦 | Boolean | - | false |
show | 始終顯示搜索列表 | Boolean | - | false |
Slot
name | 描述 |
---|---|
- | 自定義搜索結果列表 |
Switch
開關。
引入
import { Switch } from 'mint-ui';
Vue.component(Switch.name, Switch);
例子
<mt-switchv-model="value"></mt-switch>
帶顯示內容
<mt-switchv-model="value">開關</mt-switch>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 綁定值 | Boolean |
Event
名稱 | 返回值 |
---|---|
change | checked: Boolean |
Slot
name | 描述 |
---|---|
- | 顯示內容 |
Checklist
複選框列表,依賴 cell 組件。
引入
import { Checklist } from 'mint-ui';
Vue.component(Checklist.name, Checklist);
例子
基本用法
<mt-checklist title="複選框列表" v-model="value" :options="['選項A', '選項B', '選項C']"></mt-checklist>
設置禁用選項
this.options = [
{
label: '被禁用', value: '值F',
disabled: true
},
{
label: '選中禁用', value: '選中禁用的值',
disabled: true
},
{
label: '選項A', value: '值A'
},
{
label: '選項B', value: '值B'
}
];
<mt-checklist v-model="value" :options="options"></mt-checklist>
設置最大可選數
<mt-checklist :max="2" v-model="value" :options="options"></mt-checklist>
選擇框右對齊
<mt-checklist align="right" title="右對齊" v-model="value" :options="options"></mt-checklist>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
options | 選擇項,可直接傳字符串數組或者對象數組 | Array | ||
value | 綁定值 | Array | ||
title | 標題,顯示在列表上方 | string | ||
max | 最多可選個數,超事後其餘未選擇的選項變成禁用狀態 | Number | ||
align | 複選框對其位置 | String | left, right | left |
Radio
單選框列表,依賴 cell 組件。
引入
import { Radio } from 'mint-ui';
Vue.component(Radio.name, Radio);
例子
基本用法
<mt-radio title="單選框列表" v-model="value" :options="['選項A', '選項B', '選項C']"></mt-radio>
設置禁用選項
this.options = [
{
label: '被禁用', value: '值F',
disabled: true
},
{
label: '選項A', value: '值A'
},
{
label: '選項B', value: '值B'
}
];
<mt-radio title="單選框列表" v-model="value" :options="options"></mt-radio>
單選框右對齊
<mt-radio align="right" title="右對齊" v-model="value" :options="options"></mt-radio>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
options | 選擇項 | Array | ||
value | 綁定值 | String | ||
title | 標題,顯示在列表上方 | string | ||
align | 單選框對其位置 | String | left, right | left |
Field
表單編輯器。
引入
import { Field } from 'mint-ui';
Vue.component(Field.name, Field);
例子
基礎用法
<mt-fieldlabel="用戶名"placeholder="請輸入用戶名"v-model="username"></mt-field><mt-fieldlabel="郵箱"placeholder="請輸入郵箱"type="email"v-model="email"></mt-field><mt-fieldlabel="密碼"placeholder="請輸入密碼"type="password"v-model="password"></mt-field><mt-fieldlabel="手機號"placeholder="請輸入手機號"type="tel"v-model="phone"></mt-field><mt-fieldlabel="網站"placeholder="請輸入網址"type="url"v-model="website"></mt-field><mt-fieldlabel="數字"placeholder="請輸入數字"type="number"v-model="number"></mt-field><mt-fieldlabel="生日"placeholder="請輸入生日"type="date"v-model="birthday"></mt-field><mt-fieldlabel="自我介紹"placeholder="自我介紹"type="textarea"rows="4"v-modal="introduction"></mt-field>
設置校驗狀態
<mt-fieldlabel="郵箱"state="success"v-model="email"></mt-field><mt-fieldlabel="郵箱"state="error"v-model="email"></mt-field><mt-fieldlabel="郵箱"state="warning"v-model="email"></mt-field>
自定義內容(例如添加驗證碼)
<mt-fieldlabel="驗證碼"v-model="captcha">
<imgsrc="../assets/100x100.png"height="45px"width="100px"></mt-field>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 輸入框類型 | String | text, number, email, url, tel, date, datetime, password, textarea | text |
label | 標籤 | String | ||
value | 綁定表單輸入值 | String | ||
rows | 類型爲 textarea 時可指定高度(顯示行數) | Number | ||
placeholder | 佔位內容 | String | ||
disableClear | 禁用 clear 按鈕 | Booean | false | |
readonly | readonly | Boolean | false | |
disabled | disabled | Boolean | false | |
state | 校驗狀態 | String | error, success, warning | |
attr | 設置原生屬性,例如 :attr="{ maxlength: 10 }" |
Object |
Slot
name | 描述 |
---|---|
- | 顯示的 HTML 內容 |
Badge
徽章,可指定顏色和尺寸。
引入
import { Badge } from 'mint-ui';
Vue.component(Badge.name, Badge);
例子
指定尺寸
<mt-badgesize="small">30</mt-badge><mt-badgesize="normal">10</mt-badge><mt-badgesize="large">10</mt-badge>
指定類型
<mt-badgetype="primary">30</mt-badge><mt-badgetype="error">10</mt-badge><mt-badgetype="success">10</mt-badge><mt-badgetype="warning">10</mt-badge>
指定顏色
<mt-badgesize="small"color="#888">自定義顏色</mt-badge>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 顯示類型 | String | primary, error, success, warning | primary |
color | 自定義顏色值 | String | type 的顏色 | |
size | 尺寸 | String | normal, large, small | normal |
Slot
name | 描述 |
---|---|
- | 顯示內容 |
npm 安裝
推薦使用 npm 的方式安裝,它能更好地和 webpack 打包工具配合使用。
npm i mint-ui -S
CDN
目前能夠經過 unpkg.com/mint-ui 獲取到最新版本的資源,在頁面上引入 js 和 css 文件便可開始使用。
<!-- 引入樣式 --><linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><scriptsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
Hello world
經過 CDN 的方式咱們能夠很容易地使用 Mint UI 寫出一個 Hello world 頁面。
<!DOCTYPE html><html><head>
<metacharset="UTF-8">
<!-- 引入樣式 -->
<linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<divid="app">
<mt-button@click.native="handleClick">按鈕</mt-button>
</div></body>
<!-- 先引入 Vue -->
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<scriptsrc="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>new Vue({ el: '#app', methods: { handleClick: function() { this.$toast('Hello world!') } } }) </script></html>
若是是經過 npm 安裝,並但願配合 webpack 使用,請閱讀下一節:快速上手。
關於事件綁定
在 Vue 2.0 中,爲自定義組件綁定原生事件必須使用 .native
修飾符:
<my-component @click.native="handleClick">Click Me</my-component>
從易用性的角度出發,咱們對 Button
組件進行了處理,使它能夠監聽 click
事件:
<mt-button@click="handleButtonClick">Click Me</mt-button>
.native
修飾符。
快速上手
本節將介紹如何在項目中使用 Mint UI。
使用 vue-cli
npm install -g vue-cli
vue init webpack projectname
引入 Mint UI
你能夠引入整個 Mint UI,或是根據須要僅引入部分組件。咱們先介紹如何引入完整的 Mint UI。
完整引入
在 main.js 中寫入如下內容:
import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
以上代碼便完成了 Mint UI 的引入。須要注意的是,樣式文件須要單獨引入。
按需引入
藉助 babel-plugin-component,咱們能夠只引入須要的組件,以達到減少項目體積的目的。
首先,安裝 babel-plugin-component:
npm install babel-plugin-component -D
而後,將 .babelrc 修改成:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
若是你只但願引入部分組件,好比 Button 和 Cell,那麼須要在 main.js 中寫入如下內容:
import Vue from 'vue'import { Button, Cell } from 'mint-ui'import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或寫爲 * Vue.use(Button) * Vue.use(Cell) */
new Vue({
el: '#app',
components: { App }
})
開始使用
至此,一個基於 Vue 和 Mint UI 的開發環境已經搭建完畢,如今就能夠編寫代碼了。啓動開發模式:
npm run dev
編譯:
npm run build
Toast
簡短的消息提示框,支持自定義位置、持續時間和樣式。
引入
import { Toast } from 'mint-ui';
例子
基本用法
Toast('提示信息');
在調用 Toast
時傳入一個對象便可配置更多選項
Toast({
message: '提示',
position: 'bottom',
duration: 5000
});
若需在文字上方顯示一個 icon 圖標,能夠將圖標的類名做爲 iconClass
的值傳給 Toast
(圖標需自行準備)
Toast({
message: '操做成功',
iconClass: 'icon icon-success'
});
執行 Toast
方法會返回一個 Toast
實例,每一個實例都有 close
方法,用於手動關閉 Toast
let instance = Toast('提示信息');
setTimeout(() => {
instance.close();
}, 2000);
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
message | 文本內容 | String | ||
position | Toast 的位置 | String | 'top' 'bottom' 'middle' |
'middle' |
duration | 持續時間(毫秒),若爲 -1 則不會自動關閉 | Number | 3000 | |
className | Toast 的類名。能夠爲其添加樣式 | String | ||
iconClass | icon 圖標的類名 | String |
下拉/上拉刷新,支持自定義 HTML 模板。
引入
import { Loadmore } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
例子
<mt-loadmore:top-method="loadTop":bottom-method="loadBottom":bottom-all-loaded="allLoaded"ref="loadmore"><ul><liv-for="item in list">{{ item }}</li></ul></mt-loadmore>
以列表頂部的下拉刷新爲例:按住列表,下拉必定距離(經過 topDistance
配置)後釋放,被指定爲 top-method
的方法就會執行
loadTop() {
...// 加載更多數據
this.$refs.loadmore.onTopLoaded();
}
注意在這個方法的最後須要手動調用 loadmore
的 onTopLoaded
事件。這是由於在加載數據後須要對組件進行一些從新定位的操做。
列表底部的上拉刷新與之相似
loadBottom() {
...// 加載更多數據
this.allLoaded = true;// 若數據已所有獲取完畢
this.$refs.loadmore.onBottomLoaded();
}
惟一的區別是,當底部數據所有獲取完畢時,能夠將綁定到組件 bottom-all-loaded
屬性的變量賦值爲 true
,這樣 bottom-method
就不會再次執行了。
手指在屏幕上滑動的距離與組件實際移動的距離比值能夠經過 distance-index
參數配置,默認值爲 2。
自定義 HTML 模板
能夠爲列表頂部和底部的加載提示區域提供自定義的 HTML 模板
<template>
<mt-loadmore:top-method="loadTop"@top-status-change="handleTopChange"><ul><liv-for="item in list">{{ item }}</li></ul><divslot="top"class="mint-loadmore-top"><spanv-show="topStatus !== 'loading'":class="{ 'rotate': topStatus === 'drop' }">↓</span><spanv-show="topStatus === 'loading'">Loading...</span></div></mt-loadmore></template><script>exportdefault { data() { return { topStatus: '', // ... }; }, methods: { handleTopChange(status) { this.topStatus = status; }, // ... }, // ... }; </script>
好比須要配置列表頂部的 HTML,則須要爲自定義 HTML 模板的最外層標籤設置 slot
屬性爲 top
,類名爲 mint-loadmore-top
。當用戶滑動組件時,組件會有如下幾個狀態:
pull
:組件已經被按下,但按下的距離未達到topDistance
,此時釋放不會觸發top-method
,列表會回到初始位置drop
:按下的距離不小於topDistance
,此時釋放會觸發top-method
loading
:組件已被釋放,top-method
正在執行 每當組件的狀態發生變化時,loadmore
都會觸發top-status-change
方法,參數爲組件目前的狀態。所以能夠像本例同樣,使用一個handleTopChange
方法來處理組件狀態的變化。
配置加載提示區域的文字
在不使用自定義 HTML 模板的狀況下,能夠配置 loadmore
自己自帶的加載提示區域的文字。以列表頂部爲例,對應於 status
的三個狀態,可配置的屬性依次爲 topPullText
、topDropText
和 topLoadingText
。與之對應的底部屬性爲 bottomPullText
、bottomDropText
和 bottomLoadingText
。
自動檢測
loadmore
在初始化時會自動檢測它的高度是否可以撐滿其容器,若是不能則會調用 bottom-method
,直到撐滿容器爲止。若是不但願使用這一機制,能夠將 auto-fill
設爲 false
。
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
autoFill | 若爲真,loadmore 會自動檢測並撐滿其容器 |
Boolean | true | |
distanceIndex | 手指移動與組件移動距離的比值 | Number | 2 | |
maxDistance | 組件可移動的最大距離(像素),若爲 0 則不限制 | Number | 0 | |
topPullText | topStatus 爲 pull 時加載提示區域的文字 |
String | '下拉刷新' | |
topDropText | topStatus 爲 drop 時加載提示區域的文字 |
String | '釋放更新' | |
topLoadingText | topStatus 爲 loading 時加載提示區域的文字 |
String | '加載中...' | |
topDistance | 觸發 topMethod 的下拉距離閾值(像素) |
Number | 70 | |
topMethod | 下拉刷新執行的方法 | Function | ||
bottomPullText | bottomStatus 爲 pull 時加載提示區域的文字 |
String | '上拉刷新' | |
bottomDropText | bottomStatus 爲 drop 時加載提示區域的文字 |
String | '釋放更新' | |
bottomLoadingText | bottomStatus 爲 loading 時加載提示區域的文字 |
String | '加載中...' | |
bottomDistance | 觸發 bottomMethod 的上拉距離閾值(像素) |
Number | 70 | |
bottomMethod | 上拉刷新執行的方法 | Function | ||
bottomAllLoaded | 若爲真,則 bottomMethod 不會被再次觸發 |
Boolean | false |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
top-status-change | 組件頂部狀態發生變化時的回調函數 | 組件頂部的新狀態名 |
bottom-status-change | 組件底部狀態發生變化時的回調函數 | 組件底部的新狀態名 |
Slot
name | 描述 |
---|---|
- | 數據列表 |
top | 自定義頂部加載提示區域 HTML 模板 |
bottom | 自定義底部加載提示區域 HTML 模板 |
無限滾動指令。
引入
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
例子
爲 HTML 元素添加 v-infinite-scroll
指令便可使用無限滾動。滾動該元素,當其底部與被滾動元素底部的距離小於給定的閾值(經過 infinite-scroll-distance
設置)時,綁定到 v-infinite-scroll
指令的方法就會被觸發。
<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
<liv-for="item in list">{{ item }}</li></ul>
loadMore() {
this.loading = true;
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 2500);
}
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
infinite-scroll-disabled | 若爲真,則無限滾動不會被觸發 | Boolean | false | |
infinite-scroll-distance | 觸發加載方法的滾動距離閾值(像素) | Number | 0 | |
infinite-scroll-immediate-check | 若爲真,則指令被綁定到元素上後會當即檢查是否須要執行加載方法。在初始狀態下內容有可能撐不滿容器時十分有用。 | Boolean | true | |
infinite-scroll-listen-for-event | 一個 event,被執行時會當即檢查是否須要執行加載方法。 | Function |
彈出式提示框,有多種交互形式。
引入
import { MessageBox } from 'mint-ui';
例子
以標題與內容字符串爲參數進行調用
MessageBox('提示', '操做成功');
或者傳入一個對象
MessageBox({
title: '提示',
message: '肯定執行此操做?',
showCancelButton: true
});
此外,MessageBox
還提供了 alert
、confirm
和 prompt
三個方法,它們都返回一個 Promise
MessageBox.alert(message, title);
MessageBox.alert('操做成功').then(action => {
...
});
MessageBox.confirm(message, title);
MessageBox.confirm('肯定執行此操做?').then(action => {
...
});
MessageBox.prompt(message, title);
MessageBox.prompt('請輸入姓名').then(({ value, action }) => {
...
});
在 prompt 中,若用戶點擊了取消按鈕,則 Promise 的狀態會變爲 rejected
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
title | 提示框的標題 | String | ||
message | 提示框的內容 | String | ||
showConfirmButton | 是否顯示確認按鈕 | Boolean | true | |
showCancelButton | 是否顯示取消按鈕 | Boolean | false | |
confirmButtonText | 確認按鈕的文本 | String | ||
confirmButtonHighlight | 是否將確認按鈕的文本加粗顯示 | Boolean | false | |
confirmButtonClass | 確認按鈕的類名 | String | ||
cancelButtonText | 取消按鈕的文本 | String | ||
cancelButtonHighlight | 是否將取消按鈕的文本加粗顯示 | Boolean | false | |
cancelButtonClass | 取消按鈕的類名 | String | ||
closeOnClickModal | 是否在點擊遮罩時關閉提示光 | Boolean | true (alert 爲 false) | |
showInput | 是否顯示一個輸入框 | Boolean | false | |
inputType | 輸入框的類型 | String | 'text' | |
inputValue | 輸入框的值 | String | ||
inputPlaceholder | 輸入框的佔位符 | String |
Action sheet
操做表,從屏幕下方移入。
引入
import { Actionsheet } from 'mint-ui';
Vue.component(Actionsheet.name, Actionsheet);
例子
actions
屬性綁定一個由對象組成的數組,每一個對象有 name
和 method
兩個鍵,name
爲菜單項的文本,method
爲點擊該菜單項的回調函數。
將 v-model
綁定到一個本地變量,經過操做這個變量便可控制 actionsheet
的顯示與隱藏。
<mt-actionsheet:actions="actions"v-model="sheetVisible"></mt-actionsheet>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
actions | 菜單項數組 | Array | ||
cancelText | 取消按鈕的文本。若設爲空字符串,則不顯示取消按鈕 | String | '取消' | |
closeOnClickModal | 是否能夠經過點擊 modal 層來關閉 actionsheet |
Boolean | true |
Popup
彈出框,可自定義內容。
引入
import { Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);
例子
position
屬性指定了 popup
的位置。好比,position
爲 'bottom' 時,popup
會從屏幕下方移入,並最終固定在屏幕下方。移入/移出的動效會根據 position
的不一樣而自動改變,無需手動配置。
將 v-model
綁定到一個本地變量,經過操做這個變量便可控制 popup
的顯示與隱藏。
<mt-popupv-model="popupVisible"position="bottom">
...
</mt-popup>
若省略 position
屬性,則 popup
會相對於屏幕居中顯示(若不想讓其居中,可經過 CSS 對其從新定位)。此時建議將動效設置爲 popup-fade
,這樣在顯示/隱藏時會有淡入/淡出效果。
<mt-popupv-model="popupVisible"popup-transition="popup-fade">
...
</mt-popup>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
position | popup 的位置。省略則居中顯示 |
String | 'top' 'right' 'bottom' 'left' |
|
pop-transition | 顯示/隱藏時的動效,僅在省略 position 時可配置 |
String | 'popup-fade' | |
modal | 是否建立一個 modal 層 | Boolean | true | |
closeOnClickModal | 是否能夠經過點擊 modal 層來關閉 popup |
Boolean | true |
Slot
name | 描述 |
---|---|
- | 彈出框的內容 |
Swipe
輪播圖,可自定義輪播時間間隔、動畫時長等。
引入
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
例子
基礎用法
<mt-swipe:auto="4000">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
隱藏 indicators
<mt-swipe:show-indicators="false">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
取消自動播放
<mt-swipe:auto="0">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
change
事件
輪播圖切換時會觸發 change
事件,參數爲切入輪播圖的索引
<mt-swipe@change="handleChange">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item></mt-swipe>
methods: {
handleChange(index) {
...
}
}
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
speed | 動畫持時(毫秒) | Number | 300 | |
auto | 自動播放的時間間隔(毫秒) | Number | 3000 | |
defaultIndex | 初始顯示的輪播圖的索引 | Number | 0 | |
continuous | 是否能夠循環播放 | Boolean | true | |
showIndicators | 是否顯示 indicators | Boolean | true | |
prevent | 是否在 touchstart 事件觸發時阻止事件的默認行爲。設爲 true 可提升運行在低版本安卓瀏覽器時的性能 | Boolean | false | |
stopPropagation | 是否在 touchstart 事件觸發時阻止冒泡。 | Boolean | false |
Slot
mt-swipe
name | 描述 |
---|---|
- | 一個或多個 mt-swipe-item 組件 |
mt-swipe-item
name | 描述 |
---|---|
- | 單個輪播圖的內容 |
Lazy load
圖片懶加載指令。
引入
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
例子
爲 img
元素添加 v-lazy
指令,指令的值爲圖片的地址。同時須要設置圖片在加載時的樣式。
<ul>
<liv-for="item in list">
<imgv-lazy="item">
</li></ul>
image[lazy=loading] {
width: 40px;
height: 300px;
margin: auto;
}
v-lazy
指
Range
滑塊,支持自定義步長、區間等。
引入
import { Range } from 'mint-ui';
Vue.component(Range.name, Range);
例子
將一個本地變量與 range
的 value
屬性同步便可實現雙向綁定
<mt-rangev-model="rangeValue"></mt-range>
更多的配置項
<mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5"></mt-range>
可在滑塊兩側顯示文字
<mt-rangev-model="rangeValue">
<divslot="start">0</div>
<divslot="end">100</div></mt-range>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 滑塊的值 | Number | ||
min | 最小值 | Number | 0 | |
max | 最大值 | Number | 100 | |
step | 步長 | Number | 1 | |
disabled | 是否禁用 | Boolean | false | |
barHeight | 滑槽的線寬(像素) | Number | 1 |
Slot
name | 描述 |
---|---|
start | 滑塊左側 DOM |
end | 滑塊右側 DOM |
Progress
進度條。
引入
import { Progress } from 'mint-ui';
Vue.component(Progress.name, Progress);
例子
傳入 value
做爲進度條的值。可自定義它的線寬
<mt-progress :value="20" :bar-height="5"></mt-progress>
可在進度條兩側顯示文字
<mt-progress:value="60">
<divslot="start">0%</div>
<divslot="end">100%</div></mt-progress>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 進度條的值(%) | Number | ||
barHeight | 進度條的線寬(像素) | Number | 1 |
Slot
name | 描述 |
---|---|
start | 進度條左側 DOM |
end | 進度條右側 DOM |
Picker
選擇器,支持多 slot 聯動。
引入
import { Picker } from 'mint-ui';
Vue.component(Picker.name, Picker);
例子
傳入 slots
,當被選中的值發生變化時觸發 change
事件。change
事件有兩個參數,分別爲當前 picker
的 vue 實例和各 slot 被選中的值組成的數組
<mt-picker:slots="slots"@change="onValuesChange"></mt-picker>
export default {
methods: {
onValuesChange(picker, values) {
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
}
},
data() {
return {
slots: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
]
};
}
};
change
事件
在 change
事件中,可使用註冊到 picker
實例上的一些方法:
- getSlotValue(index):獲取給定 slot 目前被選中的值
- setSlotValue(index, value):設定給定 slot 被選中的值,該值必須存在於該 slot 的備選值數組中
- getSlotValues(index):獲取給定 slot 的備選值數組
- setSlotValues(index, values):設定給定 slot 的備選值數組
- getValues():獲取全部 slot 目前被選中的值(分隔符 slot 除外)
- setValues(values):設定全部 slot 被選中的值(分隔符 slot 除外),該值必須存在於對應 slot 的備選值數組中
slots
綁定到 slots
屬性的數組由對象組成,每一個對象都對應一個 slot,它們有以下鍵名
key | 描述 |
---|---|
divider | 對應 slot 是否爲分隔符 |
content | 分隔符 slot 的顯示文本 |
values | 對應 slot 的備選值數組。若爲對象數組,則需在 mt-picker 標籤上設置 value-key 屬性來指定顯示的字段名 |
defaultIndex | 對應 slot 初始選中值,需傳入其在 values 數組中的序號,默認爲 0 |
textAlign | 對應 slot 的對齊方式 |
flex | 對應 slot CSS 的 flex 值 |
className | 對應 slot 的類名 |
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
slots | slot 對象數組 | Array | [] | |
valueKey | 當 values 爲對象數組時,做爲文本顯示在 Picker 中的對應字段的字段名 | String | '' | |
showToolbar | 是否在組件頂部顯示一個 toolbar,內容自定義 | Boolean | false | |
visibleItemCount | slot 中可見備選值的個數 | Number | 5 | |
itemHeight | 每一個 slot 的高度 | Number | 36 |
Slot
name | 描述 |
---|---|
- | 當 showToolbar 爲 true 時,toolbar 中的內容 |
Datetime picker
日期時間選擇器,支持自定義類型。
引入
import { DatetimePicker } from 'mint-ui';
Vue.component(DatetimePicker.name, DatetimePicker);
例子
v-model
屬性爲組件的綁定值。
type
屬性表示 datetime-picker
組件的類型,它有三個可能的值:
datetime
: 日期時間選擇器,可選擇年、月、日、時、分,value
值爲一個Date
對象date
: 日期選擇器,可選擇年、月、日,value
值爲一個Date
對象time
: 時間選擇器,可選擇時、分,value
值爲一個格式爲HH:mm
的字符串
datetime-picker
提供了兩個供外部調用的方法:open
和 close
,分別用於打開和關閉選擇器。
<template>
<mt-datetime-pickerref="picker"type="time"v-model="pickerValue">
</mt-datetime-picker></template>
<script>exportdefault { methods: { openPicker() { this.$refs.picker.open(); } } }; </script>
能夠爲選項提供自定義模板。模板須爲一個包含了 {value}
的字符串,{value}
會被解析爲相應選項的值。
<mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>
當點擊確認按鈕時會觸發 confirm
事件,參數爲當前 value 的值。
<mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm"></mt-datetime-picker>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 組件的類型 | String | 'datetime', 'date', 'time' | 'datetime' |
cancelText | 取消按鈕文本 | String | '取消' | |
confirmText | 肯定按鈕文本 | String | '肯定' | |
startDate | 日期的最小可選值 | Date | 十年前的 1 月 1 日 | |
endDate | 日期的最大可選值 | Date | 十年後的 12 月 31 日 | |
startHour | 小時的最小可選值 | Number | 0 | |
endHour | 小時的最大可選值 | Number | 23 | |
yearFormat | 年份模板 | String | '{value}' | |
monthFormat | 月份模板 | String | '{value}' | |
dateFormat | 日期模板 | String | '{value}' | |
hourFormat | 小時模板 | String | '{value}' | |
minuteFormat | 分鐘模板 | String | '{value}' |
Events
事件名稱 | 說明 | 回調參數 |
---|---|---|
confirm | 點擊確認按鈕時的回調函數 | 目前的選擇值 |
Index List
索引列表,可由右側索引導航快速定位到相應的內容。
引入
import { IndexList, IndexSection } from 'mint-ui';
Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);
例子
<mt-index-list>
<mt-index-sectionindex="A">
<mt-celltitle="Aaron"></mt-cell>
<mt-celltitle="Alden"></mt-cell>
<mt-celltitle="Austin"></mt-cell>
</mt-index-section>
<mt-index-sectionindex="B">
<mt-celltitle="Baldwin"></mt-cell>
<mt-celltitle="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-sectionindex="Z">
<mt-celltitle="Zack"></mt-cell>
<mt-celltitle="Zane"></mt-cell>
</mt-index-section></mt-index-list>
mt-index-section
與右側導航中的索引一一對應,mt-index-section
的 index
屬性即爲與其對應的索引的顯示文本。mt-index-section
標籤內可爲任意自定義內容。
當手指在右側導航中滑動時,會在列表中間顯示一個目前索引值的提示符。若不須要提示符,只需將 show-indicator
設爲 false
<mt-index-list :show-indicator="false">
...
</mt-index-list>
API
mt-index-list
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
height | 組件的高度。若不指定,則自動延伸至視口底 | Number | ||
showIndicator | 是否顯示索引值提示符 | Boolean | true |
mt-index-section
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
index | 索引值(必需參數) | String |
Slot
mt-index-list
name | 描述 |
---|---|
- | 一個或多個 mt-index-section 組件 |
mt-index-section
name | 描述 |
---|---|
- | 單個 mt-index-section 的內容 |
調色板按鈕
引入
import { PaletteButton } from 'mint-ui';
Vue.component(PaletteButton.name, PaletteButton);
例子
基本用法
<mt-palette-button content="+">
<divclass="my-icon-button"></div>
<div class="my-icon-button"></div>
<div class="my-icon-button"></div>
</mt-palette-button>
設置參數和事件,以及手動觸發事件
methods: {
main_log(val) {
console.log('main_log', val);
},
sub_log(val) {
console.log('sub_log', val);
this.$refs.target_1.collapse();
}
}
<mt-palette-button content="+" @expand="main_log('expand')" @expanded="main_log('expanded')" @collapse="main_log('collapse')" direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;" style="left:30px;">
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
<div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
</mt-palette-button>
選項
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
content | 主按鈕內容 | String | ||
offset | 角度偏移量 | Number | Math.PI / 4 | |
direction | 按鈕展開方向 | string | lt, t, rt, r, rb, b, lb, l | lt |
radius | 按鈕展開半徑 | Number | 90 | |
mainButtonStyle | 主按鈕樣式 | String |
方法
方法名 | 說明 |
---|---|
toggle | 切換按鈕展開/收起狀態 |
expand | 展開按鈕 |
collapse | 收起按鈕 |
事件
事件名 | 說明 |
---|---|
expand | 按鈕開始展開 |
expanded | 按鈕徹底展開(動畫效果執行結束) |
collapse | 按鈕開始收起 |
Header
頂部導航欄,支持顯示按鈕、自定義文字和固定在頂部。
引入
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
例子
固定在頁面頂部
<mt-headerfixedtitle="固定在頂部"></mt-header>
設置 left
或 right
slot
<mt-headertitle="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-linkto="/"slot="left">
<mt-buttonicon="back">返回</mt-button>
</router-link>
<mt-buttonicon="more"slot="right"></mt-button></mt-header>
設置多個按鈕
<mt-headertitle="多個按鈕">
<router-linkto="/"slot="left">
<mt-buttonicon="back">返回</mt-button>
<mt-button@click="handleClose">關閉</mt-button>
</router-link>
<mt-buttonicon="more"slot="right"></mt-button></mt-header>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面頂部 | Boolean | false | |
title | 標題 | String |
Slot
name | 描述 |
---|---|
left | 左邊顯示元素 |
right | 右邊顯示元素 |
Tabbar
底部選項卡,點擊 tab 會切換顯示的頁面。依賴 tab-item 組件。
引入
import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 組件使用
<mt-tabbarv-model="selected">
<mt-tab-itemid="外賣">
<imgslot="icon"src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-itemid="訂單">
<imgslot="icon"src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-itemid="發現">
<imgslot="icon"src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-itemid="個人">
<imgslot="icon"src="../assets/100x100.png">
個人
</mt-tab-item></mt-tabbar>
API
tabbar
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面底部 | Boolean | false | |
value | 返回當前選中的 tab-item 的 id | * |
tab-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | 選中後的返回值 | * |
Slot
tabbar
name | 描述 |
---|---|
- | 內容 |
tab-item
name | 描述 |
---|---|
- | 顯示文字 |
icon | icon 圖標 |
Navbar
頂部選項卡,與 Tabbar 相似,依賴 tab-item 組件。
引入
import { Navbar, TabItem } from 'mint-ui';
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 組件使用
<mt-navbarv-model="selected">
<mt-tab-itemid="1">選項一</mt-tab-item>
<mt-tab-itemid="2">選項二</mt-tab-item>
<mt-tab-itemid="3">選項三</mt-tab-item></mt-navbar>
<!-- tab-container --><mt-tab-containerv-model="selected">
<mt-tab-container-itemid="1">
<mt-cellv-for="n in 10":title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-itemid="2">
<mt-cellv-for="n in 4":title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-itemid="3">
<mt-cellv-for="n in 6":title="'選項 ' + n" />
</mt-tab-container-item></mt-tab-container>
API
navbar
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
fixed | 固定在頁面頂部 | Boolean | false | |
value | 返回當前選中的 tab-item 的 id | * |
tab-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | 選中後的返回值 | * |
Slot
navbar
name | 描述 |
---|---|
- | 內容 |
tab-item
name | 描述 |
---|---|
- | 顯示文字 |
icon | icon 圖標 |
Button
按鈕,提供幾種基礎樣式和尺寸,可自定義圖標。
引入
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);
例子
改變顏色
<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>
改變大小
<mt-buttonsize="small">small</mt-button><mt-buttonsize="large">large</mt-button><mt-buttonsize="normal">normal</mt-button>
禁用按鈕
<mt-buttondisabled>disabled</mt-button>
幽靈按鈕
<mt-buttonplain>plain</mt-button>
帶圖標
<mt-buttonicon="back">back</mt-button><mt-buttonicon="more">更多</mt-button>
自定義圖標
<mt-button>
<imgsrc="../assets/100x100.png"height="20"width="20"slot="icon">
帶自定義圖標
</mt-button>
綁定 click 事件
<mt-button@click.native="handleClick">點擊觸發 handleClick</mt-button>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
plain | 幽靈按鈕 | Boolean | false | |
disabled | 禁用狀態 | Boolean | false | |
type | 按鈕顯示樣式 | String | default, primary, danger | default |
size | 尺寸 | String | small, normal, large | normal |
icon | 圖標 | String | more, back |
Slot
name | 描述 |
---|---|
- | 顯示的文本內容 |
icon | 自定義顯示的圖標 |
Cell
單元格,可用做展現列表信息、連接或者表單等。
引入
import { Cell } from 'mint-ui';
Vue.component(Cell.name, Cell);
例子
基礎用法
<mt-celltitle="標題文字"></mt-cell><mt-celltitle="標題文字"value="說明文字"></mt-cell>
可點擊的連接
<mt-celltitle="標題文字"to="//github.com"is-linkvalue="帶連接"></mt-cell>
帶圖標
<mt-celltitle="標題文字"icon="more"value="帶 icon"></mt-cell>
帶自定義圖標
<mt-celltitle="標題文字">
<span>icon 是圖片</span>
<imgslot="icon"src="../assets/100x100.png"width="24"height="24"></mt-cell>
自定義內容
<mt-celltitle="標題文字"is-link>
<spanstyle="color: green">這裏是元素</span></mt-cell>
帶備註信息
<mt-celltitle="標題"label="描述信息"is-link></mt-cell>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
icon | 圖標 | String | back, more | |
title | 標題 | String | ||
to | 跳轉連接 | String | ||
value | 內容 | * | ||
label | 備註信息,顯示在標題下方 | String | ||
is-link | 連接,會顯示箭頭圖標。搭配 to 屬性使用 | Boolean |
Slot
name | 描述 |
---|---|
- | 自定義顯示內容 |
title | 自定義標題 |
icon | 自定義圖標 |
Cell Swipe
可滑動的單元格,用法同 cell。
引入
import { CellSwipe } from 'mint-ui';
Vue.component(CellSwipe.name, CellSwipe);
例子
增長右滑動按鈕
<mt-cell-swipe title="標題文字" :right="[ { content: 'Delete', style: { background: 'red', color: '#fff' }, handler: () => this.$messagebox('delete') } ]"></mt-cell-swipe>
content
能夠是 HTML 或者純文本。
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
icon | 圖標 | String | back, more | |
title | 標題 | String | ||
to | 跳轉連接 | String | ||
value | 內容 | * | ||
label | 備註信息,顯示在標題下方 | String | ||
is-link | 連接,會顯示箭頭圖標。搭配 to 屬性使用 | Boolean | ||
left | 按鈕組, { content, style, handler } |
Object[] | ||
right | 按鈕組, { content, style, handler } |
Object[] |
Slot
name | 描述 |
---|---|
- | 自定義顯示內容 |
title | 自定義標題 |
icon | 自定義圖標 |
Spinner
加載動畫,可指定顯示類型、尺寸和顏色。
引入
import { Spinner } from 'mint-ui';
Vue.component(Spinner.name, Spinner);
例子
指定類型
<mt-spinner type="snake"></mt-spinner><mt-spinnertype="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinnertype="fading-circle"></mt-spinner>
<!-- 或者接受傳入類型的序號 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>
指定顏色
<mt-spinnercolor="#26a2ff"></mt-spinner><mt-spinnercolor="rgb(100, 100, 100)"></mt-spinner><mt-spinnercolor="yellow"></mt-spinner>
指定尺寸
<mt-spinner :size="60"></mt-spinner>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
type | 顯示類型,提供四種風格,能夠指定名稱或者序號 | String、Number | snake double-bounce triple-bounce fading-circle |
snake |
color | 顏色,接受 hex、rgb 等顏色值 | String | #ccc | |
size | 尺寸,單位 px | Number | 28 |
tab-container
面板,可切換顯示子頁面。
引入
import { TabContainer, TabContainerItem } from 'mint-ui';
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
例子
改變 ative 的值,與 <tab-container-item>
的 id 一致即顯示對應頁面。
<mt-tab-containerv-model="active">
<mt-tab-container-itemid="tab-container1">
<mt-cellv-for="n in 10"title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-itemid="tab-container2">
<mt-cellv-for="n in 5"title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-itemid="tab-container3">
<mt-cellv-for="n in 7"title="tab-container 3"></mt-cell>
</mt-tab-container-item></mt-tab-container>
API
tab-container
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 當前激活的 id | * | ||
swipeable | 顯示滑動效果 | Boolean | false |
tab-container-item
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
id | item 的 id | * |
Slot
tab-container
name | 描述 |
---|---|
- | 內容 |
tab-container-item
name | 描述 |
---|---|
- | 內容 |
Search
搜索框,可顯示搜索結果列表。
引入
import { Search } from 'mint-ui';
Vue.component(Search.name, Search);
例子
基礎用法
<mt-searchv-model="value"></mt-search>
設置顯示文字
<mt-searchv-model="value"cancel-text="取消"placeholder="搜索"></mt-search>
帶搜索結果
<mt-searchv-model="value":result.sync="result"></mt-search>
自定義搜索結果
<mt-search v-model="value">
<mt-cell v-for="item in result" :title="item.title" :value="item.value">
</mt-cell></mt-search>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 搜索結果綁定值 | String | ||
cancel-text | 取消按鈕文字 | String | 取消 | |
placeholder | 搜索框佔位內容 | String | 搜索 | |
result | 搜索結果列表 | Array | ||
autofocus | 自動聚焦 | Boolean | - | false |
show | 始終顯示搜索列表 | Boolean | - | false |
Slot
name | 描述 |
---|---|
- | 自定義搜索結果列表 |
Switch
開關。
引入
import { Switch } from 'mint-ui';
Vue.component(Switch.name, Switch);
例子
<mt-switchv-model="value"></mt-switch>
帶顯示內容
<mt-switchv-model="value">開關</mt-switch>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
value | 綁定值 | Boolean |
Event
名稱 | 返回值 |
---|---|
change | checked: Boolean |
Slot
name | 描述 |
---|---|
- | 顯示內容 |
Checklist
複選框列表,依賴 cell 組件。
引入
import { Checklist } from 'mint-ui';
Vue.component(Checklist.name, Checklist);
例子
基本用法
<mt-checklist title="複選框列表" v-model="value" :options="['選項A', '選項B', '選項C']"></mt-checklist>
設置禁用選項
this.options = [
{
label: '被禁用', value: '值F',
disabled: true
},
{
label: '選中禁用', value: '選中禁用的值',
disabled: true
},
{
label: '選項A', value: '值A'
},
{
label: '選項B', value: '值B'
}
];
<mt-checklist v-model="value" :options="options"></mt-checklist>
設置最大可選數
<mt-checklist :max="2" v-model="value" :options="options"></mt-checklist>
選擇框右對齊
<mt-checklist align="right" title="右對齊" v-model="value" :options="options"></mt-checklist>
API
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
options | 選擇項,可直接傳字符串數組或者對象數組 | Array |