npm 安裝

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

npm i mint-ui -S

CDN

目前可以通過 unpkg.com/mint-ui 獲取到最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

<!DOCTYPE html><html><head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div></body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="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>
<li v-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>
<li v-for="item in list">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore></template><script>
export default {
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 模板

Infinite scroll

無限滾動指令。

引入

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">
<li v-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

Message box

彈出式提示框，有多種交互形式。

引入

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-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>

若省略 position 屬性，則 popup 會相對於屏幕居中顯示（若不想讓其居中，可通過 CSS 對其重新定位）。此時建議將動效設置爲 popup-fade，這樣在顯示/隱藏時會有淡入/淡出效果。

<mt-popup
v-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>
<li v-for="item in list">
<img v-lazy="item">
</li></ul>

image[lazy=loading] { width: 40px; height: 300px; margin: auto; }

若列表不在 window 上滾動，則需要將被滾動元素的 id 屬性以修飾符的形式傳遞給 v-lazy 指

<ul>

</li>

</ul></div>

Range

滑塊，支持自定義步長、區間等。

引入

import { Range } from 'mint-ui';
Vue.component(Range.name, Range);

例子

將一個本地變量與 range 的 value 屬性同步即可實現雙向綁定

<mt-range v-model="rangeValue"></mt-range>

更多的配置項

<mt-range
v-model="rangeValue"
:min="10"
:max="90"
:step="10"
:bar-height="5"></mt-range>

可在滑塊兩側顯示文字

<mt-range v-model="rangeValue">
<div slot="start">0</div>
<div slot="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">
<div slot="start">0%</div>
<div slot="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-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker></template>
<script>
export default {
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-section index="A">
<mt-cell title="Aaron"></mt-cell>
<mt-cell title="Alden"></mt-cell>
<mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
<mt-cell title="Baldwin"></mt-cell>
<mt-cell title="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-section index="Z">
<mt-cell title="Zack"></mt-cell>
<mt-cell title="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="+">
<div class="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-header fixed title="固定在頂部"></mt-header>

設置 left 或 right slot

<mt-header title="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button></mt-header>

設置多個按鈕

<mt-header title="多個按鈕">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
<mt-button @click="handleClose">關閉</mt-button>
</router-link>
<mt-button icon="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-tabbar v-model="selected">
<mt-tab-item id="外賣">
<img slot="icon" src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-item id="訂單">
<img slot="icon" src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-item id="發現">
<img slot="icon" src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="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-navbar v-model="selected">
<mt-tab-item id="1">選項一</mt-tab-item>
<mt-tab-item id="2">選項二</mt-tab-item>
<mt-tab-item id="3">選項三</mt-tab-item></mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-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-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按鈕

<mt-button disabled>disabled</mt-button>

幽靈按鈕

<mt-button plain>plain</mt-button>

帶圖標

<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>

自定義圖標

<mt-button>
<img src="../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-cell title="標題文字"></mt-cell><mt-cell title="標題文字" value="說明文字"></mt-cell>

可點擊的鏈接

<mt-cell
title="標題文字"
to="//github.com"
is-link
value="帶鏈接"></mt-cell>

帶圖標

<mt-cell title="標題文字" icon="more" value="帶 icon"></mt-cell>

帶自定義圖標

<mt-cell title="標題文字">
<span>icon 是圖片</span>
<img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>

自定義內容

<mt-cell title="標題文字" is-link>
<span style="color: green">這裏是元素</span></mt-cell>

帶備註信息

<mt-cell title="標題" 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-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="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-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="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-container v-model="active">
<mt-tab-container-item id="tab-container1">
<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
<mt-cell v-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-search v-model="value"></mt-search>

設置顯示文字

<mt-search
v-model="value"
cancel-text="取消"
placeholder="搜索"></mt-search>

帶搜索結果

<mt-search v-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-switch v-model="value"></mt-switch>

帶顯示內容

<mt-switch v-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-field label="用戶名" placeholder="請輸入用戶名" v-model="username"></mt-field><mt-field label="郵箱" placeholder="請輸入郵箱" type="email" v-model="email"></mt-field><mt-field label="密碼" placeholder="請輸入密碼" type="password" v-model="password"></mt-field><mt-field label="手機號" placeholder="請輸入手機號" type="tel" v-model="phone"></mt-field><mt-field label="網站" placeholder="請輸入網址" type="url" v-model="website"></mt-field><mt-field label="數字" placeholder="請輸入數字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="請輸入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介紹" placeholder="自我介紹" type="textarea" rows="4" v-modal="introduction"></mt-field>

設置校驗狀態

<mt-field label="郵箱" state="success" v-model="email"></mt-field><mt-field label="郵箱" state="error" v-model="email"></mt-field><mt-field label="郵箱" state="warning" v-model="email"></mt-field>

自定義內容（例如添加驗證碼）

<mt-field label="驗證碼" v-model="captcha">
<img src="../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-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定類型

<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>

指定顏色

<mt-badge size="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 文件即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

<!DOCTYPE html><html><head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div></body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="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>
<li v-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>
<li v-for="item in list">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore></template><script>
export default {
data() {
return {
topStatus: '',
// ...
};
},
methods: {
handleTopChange(status) {
this.topStatus = status;
},
// ...
},
// ...
};
</script>

pull：組件已經被按下，但按下的距離未達到 topDistance，此時釋放不會觸發 top-method，列表會回到初始位置
drop：按下的距離不小於 topDistance，此時釋放會觸發 top-method
loading：組件已被釋放，top-method 正在執行每當組件的狀態發生變化時，loadmore 都會觸發 top-status-change 方法，參數爲組件目前的狀態。因此可以像本例一樣，使用一個 handleTopChange 方法來處理組件狀態的變化。

配置加載提示區域的文字

自動檢測

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 模板

Infinite scroll

無限滾動指令。

引入

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

例子

<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li v-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

Message box

彈出式提示框，有多種交互形式。

引入

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);

例子

將 v-model 綁定到一個本地變量，通過操作這個變量即可控制 popup 的顯示與隱藏。

<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>

<mt-popup
v-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>
<li v-for="item in list">
<img v-lazy="item">
</li></ul>

image[lazy=loading] { width: 40px; height: 300px; margin: auto; }

若列表不在 window 上滾動，則需要將被滾動元素的 id 屬性以修飾符的形式傳遞給 v-lazy 指

<ul>

</li>

</ul></div>

Range

滑塊，支持自定義步長、區間等。

引入

import { Range } from 'mint-ui';
Vue.component(Range.name, Range);

例子

將一個本地變量與 range 的 value 屬性同步即可實現雙向綁定

<mt-range v-model="rangeValue"></mt-range>

更多的配置項

<mt-range
v-model="rangeValue"
:min="10"
:max="90"
:step="10"
:bar-height="5"></mt-range>

可在滑塊兩側顯示文字

<mt-range v-model="rangeValue">
<div slot="start">0</div>
<div slot="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">
<div slot="start">0%</div>
<div slot="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-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker></template>
<script>
export default {
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-section index="A">
<mt-cell title="Aaron"></mt-cell>
<mt-cell title="Alden"></mt-cell>
<mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
<mt-cell title="Baldwin"></mt-cell>
<mt-cell title="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-section index="Z">
<mt-cell title="Zack"></mt-cell>
<mt-cell title="Zane"></mt-cell>
</mt-index-section></mt-index-list>

當手指在右側導航中滑動時，會在列表中間顯示一個目前索引值的提示符。若不需要提示符，只需將 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="+">
<div class="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-header fixed title="固定在頂部"></mt-header>

設置 left 或 right slot

<mt-header title="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button></mt-header>

設置多個按鈕

<mt-header title="多個按鈕">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
<mt-button @click="handleClose">關閉</mt-button>
</router-link>
<mt-button icon="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-tabbar v-model="selected">
<mt-tab-item id="外賣">
<img slot="icon" src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-item id="訂單">
<img slot="icon" src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-item id="發現">
<img slot="icon" src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="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-navbar v-model="selected">
<mt-tab-item id="1">選項一</mt-tab-item>
<mt-tab-item id="2">選項二</mt-tab-item>
<mt-tab-item id="3">選項三</mt-tab-item></mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-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-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按鈕

<mt-button disabled>disabled</mt-button>

幽靈按鈕

<mt-button plain>plain</mt-button>

帶圖標

<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>

自定義圖標

<mt-button>
<img src="../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-cell title="標題文字"></mt-cell><mt-cell title="標題文字" value="說明文字"></mt-cell>

可點擊的鏈接

<mt-cell
title="標題文字"
to="//github.com"
is-link
value="帶鏈接"></mt-cell>

帶圖標

<mt-cell title="標題文字" icon="more" value="帶 icon"></mt-cell>

帶自定義圖標

<mt-cell title="標題文字">
<span>icon 是圖片</span>
<img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>

自定義內容

<mt-cell title="標題文字" is-link>
<span style="color: green">這裏是元素</span></mt-cell>

帶備註信息

<mt-cell title="標題" 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-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="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-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="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-container v-model="active">
<mt-tab-container-item id="tab-container1">
<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
<mt-cell v-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-search v-model="value"></mt-search>

設置顯示文字

<mt-search
v-model="value"
cancel-text="取消"
placeholder="搜索"></mt-search>

帶搜索結果

<mt-search v-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-switch v-model="value"></mt-switch>

帶顯示內容

<mt-switch v-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-field label="用戶名" placeholder="請輸入用戶名" v-model="username"></mt-field><mt-field label="郵箱" placeholder="請輸入郵箱" type="email" v-model="email"></mt-field><mt-field label="密碼" placeholder="請輸入密碼" type="password" v-model="password"></mt-field><mt-field label="手機號" placeholder="請輸入手機號" type="tel" v-model="phone"></mt-field><mt-field label="網站" placeholder="請輸入網址" type="url" v-model="website"></mt-field><mt-field label="數字" placeholder="請輸入數字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="請輸入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介紹" placeholder="自我介紹" type="textarea" rows="4" v-modal="introduction"></mt-field>

設置校驗狀態

<mt-field label="郵箱" state="success" v-model="email"></mt-field><mt-field label="郵箱" state="error" v-model="email"></mt-field><mt-field label="郵箱" state="warning" v-model="email"></mt-field>

自定義內容（例如添加驗證碼）

<mt-field label="驗證碼" v-model="captcha">
<img src="../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-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定類型

<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>

指定顏色

<mt-badge size="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 文件即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

<!DOCTYPE html><html><head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div></body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="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>
<li v-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>
<li v-for="item in list">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore></template><script>
export default {
data() {
return {
topStatus: '',
// ...
};
},
methods: {
handleTopChange(status) {
this.topStatus = status;
},
// ...
},
// ...
};
</script>

pull：組件已經被按下，但按下的距離未達到 topDistance，此時釋放不會觸發 top-method，列表會回到初始位置
drop：按下的距離不小於 topDistance，此時釋放會觸發 top-method
loading：組件已被釋放，top-method 正在執行每當組件的狀態發生變化時，loadmore 都會觸發 top-status-change 方法，參數爲組件目前的狀態。因此可以像本例一樣，使用一個 handleTopChange 方法來處理組件狀態的變化。

配置加載提示區域的文字

自動檢測

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 模板

Infinite scroll

無限滾動指令。

引入

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

例子

<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li v-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

Message box

彈出式提示框，有多種交互形式。

引入

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);

例子

將 v-model 綁定到一個本地變量，通過操作這個變量即可控制 popup 的顯示與隱藏。

<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>

<mt-popup
v-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>
<li v-for="item in list">
<img v-lazy="item">
</li></ul>

image[lazy=loading] { width: 40px; height: 300px; margin: auto; }

若列表不在 window 上滾動，則需要將被滾動元素的 id 屬性以修飾符的形式傳遞給 v-lazy 指

<ul>

</li>

</ul></div>

Range

滑塊，支持自定義步長、區間等。

引入

import { Range } from 'mint-ui';
Vue.component(Range.name, Range);

例子

將一個本地變量與 range 的 value 屬性同步即可實現雙向綁定

<mt-range v-model="rangeValue"></mt-range>

更多的配置項

<mt-range
v-model="rangeValue"
:min="10"
:max="90"
:step="10"
:bar-height="5"></mt-range>

可在滑塊兩側顯示文字

<mt-range v-model="rangeValue">
<div slot="start">0</div>
<div slot="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">
<div slot="start">0%</div>
<div slot="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-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker></template>
<script>
export default {
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-section index="A">
<mt-cell title="Aaron"></mt-cell>
<mt-cell title="Alden"></mt-cell>
<mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
<mt-cell title="Baldwin"></mt-cell>
<mt-cell title="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-section index="Z">
<mt-cell title="Zack"></mt-cell>
<mt-cell title="Zane"></mt-cell>
</mt-index-section></mt-index-list>

當手指在右側導航中滑動時，會在列表中間顯示一個目前索引值的提示符。若不需要提示符，只需將 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="+">
<div class="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-header fixed title="固定在頂部"></mt-header>

設置 left 或 right slot

<mt-header title="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button></mt-header>

設置多個按鈕

<mt-header title="多個按鈕">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
<mt-button @click="handleClose">關閉</mt-button>
</router-link>
<mt-button icon="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-tabbar v-model="selected">
<mt-tab-item id="外賣">
<img slot="icon" src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-item id="訂單">
<img slot="icon" src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-item id="發現">
<img slot="icon" src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="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-navbar v-model="selected">
<mt-tab-item id="1">選項一</mt-tab-item>
<mt-tab-item id="2">選項二</mt-tab-item>
<mt-tab-item id="3">選項三</mt-tab-item></mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-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-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按鈕

<mt-button disabled>disabled</mt-button>

幽靈按鈕

<mt-button plain>plain</mt-button>

帶圖標

<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>

自定義圖標

<mt-button>
<img src="../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-cell title="標題文字"></mt-cell><mt-cell title="標題文字" value="說明文字"></mt-cell>

可點擊的鏈接

<mt-cell
title="標題文字"
to="//github.com"
is-link
value="帶鏈接"></mt-cell>

帶圖標

<mt-cell title="標題文字" icon="more" value="帶 icon"></mt-cell>

帶自定義圖標

<mt-cell title="標題文字">
<span>icon 是圖片</span>
<img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>

自定義內容

<mt-cell title="標題文字" is-link>
<span style="color: green">這裏是元素</span></mt-cell>

帶備註信息

<mt-cell title="標題" 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-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="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-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="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-container v-model="active">
<mt-tab-container-item id="tab-container1">
<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
<mt-cell v-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-search v-model="value"></mt-search>

設置顯示文字

<mt-search
v-model="value"
cancel-text="取消"
placeholder="搜索"></mt-search>

帶搜索結果

<mt-search v-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-switch v-model="value"></mt-switch>

帶顯示內容

<mt-switch v-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-field label="用戶名" placeholder="請輸入用戶名" v-model="username"></mt-field><mt-field label="郵箱" placeholder="請輸入郵箱" type="email" v-model="email"></mt-field><mt-field label="密碼" placeholder="請輸入密碼" type="password" v-model="password"></mt-field><mt-field label="手機號" placeholder="請輸入手機號" type="tel" v-model="phone"></mt-field><mt-field label="網站" placeholder="請輸入網址" type="url" v-model="website"></mt-field><mt-field label="數字" placeholder="請輸入數字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="請輸入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介紹" placeholder="自我介紹" type="textarea" rows="4" v-modal="introduction"></mt-field>

設置校驗狀態

<mt-field label="郵箱" state="success" v-model="email"></mt-field><mt-field label="郵箱" state="error" v-model="email"></mt-field><mt-field label="郵箱" state="warning" v-model="email"></mt-field>

自定義內容（例如添加驗證碼）

<mt-field label="驗證碼" v-model="captcha">
<img src="../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-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定類型

<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>

指定顏色

<mt-badge size="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 文件即可開始使用。

<!-- 引入樣式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入組件庫 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>

Hello world

通過 CDN 的方式我們可以很容易地使用 Mint UI 寫出一個 Hello world 頁面。

<!DOCTYPE html><html><head>
<meta charset="UTF-8">

<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
<div id="app">
<mt-button @click.native="handleClick">按鈕</mt-button>
</div></body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="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>
<li v-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>
<li v-for="item in list">{{ item }}</li>
</ul>
<div slot="top" class="mint-loadmore-top">
<span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
<span v-show="topStatus === 'loading'">Loading...</span>
</div>
</mt-loadmore></template><script>
export default {
data() {
return {
topStatus: '',
// ...
};
},
methods: {
handleTopChange(status) {
this.topStatus = status;
},
// ...
},
// ...
};
</script>

pull：組件已經被按下，但按下的距離未達到 topDistance，此時釋放不會觸發 top-method，列表會回到初始位置
drop：按下的距離不小於 topDistance，此時釋放會觸發 top-method
loading：組件已被釋放，top-method 正在執行每當組件的狀態發生變化時，loadmore 都會觸發 top-status-change 方法，參數爲組件目前的狀態。因此可以像本例一樣，使用一個 handleTopChange 方法來處理組件狀態的變化。

配置加載提示區域的文字

自動檢測

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 模板

Infinite scroll

無限滾動指令。

引入

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

例子

<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<li v-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

Message box

彈出式提示框，有多種交互形式。

引入

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);

例子

將 v-model 綁定到一個本地變量，通過操作這個變量即可控制 popup 的顯示與隱藏。

<mt-popup
v-model="popupVisible"
position="bottom">
...
</mt-popup>

<mt-popup
v-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>
<li v-for="item in list">
<img v-lazy="item">
</li></ul>

image[lazy=loading] { width: 40px; height: 300px; margin: auto; }

若列表不在 window 上滾動，則需要將被滾動元素的 id 屬性以修飾符的形式傳遞給 v-lazy 指

<ul>

</li>

</ul></div>

Range

滑塊，支持自定義步長、區間等。

引入

import { Range } from 'mint-ui';
Vue.component(Range.name, Range);

例子

將一個本地變量與 range 的 value 屬性同步即可實現雙向綁定

<mt-range v-model="rangeValue"></mt-range>

更多的配置項

<mt-range
v-model="rangeValue"
:min="10"
:max="90"
:step="10"
:bar-height="5"></mt-range>

可在滑塊兩側顯示文字

<mt-range v-model="rangeValue">
<div slot="start">0</div>
<div slot="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">
<div slot="start">0%</div>
<div slot="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-picker
ref="picker"
type="time"
v-model="pickerValue">
</mt-datetime-picker></template>
<script>
export default {
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-section index="A">
<mt-cell title="Aaron"></mt-cell>
<mt-cell title="Alden"></mt-cell>
<mt-cell title="Austin"></mt-cell>
</mt-index-section>
<mt-index-section index="B">
<mt-cell title="Baldwin"></mt-cell>
<mt-cell title="Braden"></mt-cell>
</mt-index-section>
...
<mt-index-section index="Z">
<mt-cell title="Zack"></mt-cell>
<mt-cell title="Zane"></mt-cell>
</mt-index-section></mt-index-list>

當手指在右側導航中滑動時，會在列表中間顯示一個目前索引值的提示符。若不需要提示符，只需將 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="+">
<div class="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-header fixed title="固定在頂部"></mt-header>

設置 left 或 right slot

<mt-header title="標題過長會隱藏後面的內容啊哈哈哈哈">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button></mt-header>

設置多個按鈕

<mt-header title="多個按鈕">
<router-link to="/" slot="left">
<mt-button icon="back">返回</mt-button>
<mt-button @click="handleClose">關閉</mt-button>
</router-link>
<mt-button icon="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-tabbar v-model="selected">
<mt-tab-item id="外賣">
<img slot="icon" src="../assets/100x100.png">
外賣
</mt-tab-item>
<mt-tab-item id="訂單">
<img slot="icon" src="../assets/100x100.png">
訂單
</mt-tab-item>
<mt-tab-item id="發現">
<img slot="icon" src="../assets/100x100.png">
發現
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="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-navbar v-model="selected">
<mt-tab-item id="1">選項一</mt-tab-item>
<mt-tab-item id="2">選項二</mt-tab-item>
<mt-tab-item id="3">選項三</mt-tab-item></mt-navbar>
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<mt-cell v-for="n in 10" :title="'內容 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="2">
<mt-cell v-for="n in 4" :title="'測試 ' + n" />
</mt-tab-container-item>
<mt-tab-container-item id="3">
<mt-cell v-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-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按鈕

<mt-button disabled>disabled</mt-button>

幽靈按鈕

<mt-button plain>plain</mt-button>

帶圖標

<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>

自定義圖標

<mt-button>
<img src="../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-cell title="標題文字"></mt-cell><mt-cell title="標題文字" value="說明文字"></mt-cell>

可點擊的鏈接

<mt-cell
title="標題文字"
to="//github.com"
is-link
value="帶鏈接"></mt-cell>

帶圖標

<mt-cell title="標題文字" icon="more" value="帶 icon"></mt-cell>

帶自定義圖標

<mt-cell title="標題文字">
<span>icon 是圖片</span>
<img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>

自定義內容

<mt-cell title="標題文字" is-link>
<span style="color: green">這裏是元素</span></mt-cell>

帶備註信息

<mt-cell title="標題" 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-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="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-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="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-container v-model="active">
<mt-tab-container-item id="tab-container1">
<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
<mt-cell v-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-search v-model="value"></mt-search>

設置顯示文字

<mt-search
v-model="value"
cancel-text="取消"
placeholder="搜索"></mt-search>

帶搜索結果

<mt-search v-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-switch v-model="value"></mt-switch>

帶顯示內容

<mt-switch v-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-field label="用戶名" placeholder="請輸入用戶名" v-model="username"></mt-field><mt-field label="郵箱" placeholder="請輸入郵箱" type="email" v-model="email"></mt-field><mt-field label="密碼" placeholder="請輸入密碼" type="password" v-model="password"></mt-field><mt-field label="手機號" placeholder="請輸入手機號" type="tel" v-model="phone"></mt-field><mt-field label="網站" placeholder="請輸入網址" type="url" v-model="website"></mt-field><mt-field label="數字" placeholder="請輸入數字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="請輸入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介紹" placeholder="自我介紹" type="textarea" rows="4" v-modal="introduction"></mt-field>

設置校驗狀態

<mt-field label="郵箱" state="success" v-model="email"></mt-field><mt-field label="郵箱" state="error" v-model="email"></mt-field><mt-field label="郵箱" state="warning" v-model="email"></mt-field>

自定義內容（例如添加驗證碼）

<mt-field label="驗證碼" v-model="captcha">
<img src="../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-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定類型

<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>

指定顏色

<mt-badge size="small" color="#888">自定義顏色</mt-badge>

API

參數	說明	類型	可選值	默認值
type	顯示類型	String	primary, error, success, warning	primary
color	自定義顏色值	String		type 的顏色
size	尺寸	String	normal, large, small	normal

Slot

name	描述
-	顯示內容

mint-ui使用手冊

npm 安裝

CDN

Hello world

快速上手

使用 vue-cli

引入 Mint UI

完整引入

按需引入

開始使用

Toast

引入

例子

API

引入

例子

自定義 HTML 模板

配置加載提示區域的文字

自動檢測

API

Events

Slot

引入

例子

API

引入

例子

API

Action sheet

引入

例子

API

Popup

引入

例子

API

Slot

Swipe

引入

例子

API

Slot

mt-swipe

mt-swipe-item

Lazy load

引入

例子

Range

引入

例子

API

Slot

Progress

引入

例子

API

Slot

Picker

引入

例子

change 事件

slots

API

Slot

Datetime picker

引入

例子

API

Events

Index List

引入

例子

API

mt-index-list

mt-index-section

Slot

mt-index-list

mt-index-section

引入

例子

`change` 事件

`slots`