vue mint-ui 使用手册

骑猪看日落 2022-06-08 14:51 248阅读 0赞

### npm 安装 ###

推荐使用 npm 的方式安装，它能更好地和 [webpack][] 打包工具配合使用。

npm i mint-ui -S

### CDN ###

目前可以通过 [unpkg.com/mint-ui][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 使用，请阅读下一节：[快速上手。][Link 1]

**关于事件绑定**

在 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 ##

> 下拉/上拉刷新，支持自定义 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 ##

<table style="margin:0px 0px 1rem; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; border-spacing:0px; width:730.4px; max-width:100%; table-layout:fixed"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 参数</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 说明</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 类型</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:110px"> 可选值</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 默认值</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> autoFill</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 若为真，<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">loadmore</code>&nbsp;会自动检测并撑满其容器</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> true</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> distanceIndex</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 手指移动与组件移动距离的比值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 2</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> maxDistance</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 组件可移动的最大距离（像素），若为 0 则不限制</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 0</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> topPullText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">topStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">pull</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '下拉刷新'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> topDropText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">topStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">drop</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '释放更新'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> topLoadingText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">topStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">loading</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '加载中...'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> topDistance</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 触发&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">topMethod</code>&nbsp;的下拉距离阈值（像素）</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 70</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> topMethod</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 下拉刷新执行的方法</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Function</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomPullText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">bottomStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">pull</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '上拉刷新'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomDropText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">bottomStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">drop</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '释放更新'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomLoadingText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> <code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">bottomStatus</code>&nbsp;为&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">loading</code>&nbsp;时加载提示区域的文字</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '加载中...'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomDistance</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 触发&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">bottomMethod</code>&nbsp;的上拉距离阈值（像素）</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 70</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomMethod</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 上拉刷新执行的方法</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Function</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> bottomAllLoaded</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 若为真，则&nbsp;<code style="margin:0px; padding:0px; font-family:monospace,monospace; font-size:1em">bottomMethod</code>&nbsp;不会被再次触发</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> false</td> 
  </tr> 
 </tbody> 
</table>

## Events ##

## Slot ##

Infinite scroll

> 无限滚动指令。

--------------------

## 引入 ##

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

## 例子 ##

为 HTML 元素添加 `v-infinite-scroll` 指令即可使用无限滚动。滚动该元素，当其底部与被滚动元素底部的距离小于给定的阈值（通过 `infinite-scroll-distance` 设置）时，绑定到 `v-infinite-scroll` 指令的方法就会被触发。

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 ##

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 ##

<table style="margin:0px 0px 1rem; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; border-spacing:0px; table-layout:fixed; width:731px"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); background-color:rgb(244,245,247); width:202px"> <span style="margin:0px; padding:0px">参数</span></td> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 说明</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 类型</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:110px"> 可选值</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 默认值</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> title</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 提示框的标题</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> message</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 提示框的内容</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> showConfirmButton</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否显示确认按钮</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> true</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> showCancelButton</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否显示取消按钮</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> confirmButtonText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 确认按钮的文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> confirmButtonHighlight</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否将确认按钮的文本加粗显示</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> confirmButtonClass</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 确认按钮的类名</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> cancelButtonText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 取消按钮的文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> cancelButtonHighlight</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否将取消按钮的文本加粗显示</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> cancelButtonClass</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 取消按钮的类名</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> closeOnClickModal</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否在点击遮罩时关闭提示光</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> true (alert 为 false)</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> showInput</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 是否显示一个输入框</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Boolean</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> false</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> inputType</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 输入框的类型</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 'text'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> inputValue</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 输入框的值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,SimSun,sans-serif; font-size:14px"> inputPlaceholder</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,SimSun,sans-serif; font-size:14px"> 输入框的占位符</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,SimSun,sans-serif; font-size:14px"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); font-family:&quot;Helvetica Neue&quot;,Helvetica,&quot;PingFang SC&quot;,&quot;Hiragino Sans GB&quot;,&quot;Microsoft YaHei&quot;,SimSun,sans-serif; font-size:14px"> &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

# 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 ##

# 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 ##

## Slot ##

# 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 ##

## Slot ##

### mt-swipe ###

### mt-swipe-item ###

# Lazy load #

> 图片懒加载指令。

--------------------

## 引入 ##

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

## 例子 ##

为 `img` 元素添加 `v-lazy` 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。

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

若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给  `v-lazy`  指

<div id="container">

<ul>

<li v-for="item in list">

<img v-lazy.container="item">

</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 ##

## Slot ##

# 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 ##

## Slot ##

# 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，它们有如下键名

## API ##

## Slot ##

# 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 ##

<table style="margin:0px 0px 1rem; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; border-spacing:0px; width:730.4px; max-width:100%; table-layout:fixed"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 参数</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 说明</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 类型</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:110px"> 可选值</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 默认值</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> type</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 组件的类型</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 'datetime', 'date', 'time'</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 'datetime'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> cancelText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 取消按钮文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '取消'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> confirmText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 确定按钮文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '确定'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> startDate</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期的最小可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Date</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 十年前的 1 月 1 日</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> endDate</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期的最大可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Date</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 十年后的 12 月 31 日</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> startHour</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时的最小可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 0</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> endHour</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时的最大可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 23</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> yearFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 年份模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> monthFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 月份模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> dateFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> hourFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> minuteFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 分钟模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
 </tbody> 
</table>

## Events ##

# 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 ###

### mt-index-section ###

## Slot ##

### mt-index-list ###

### 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>

## 选项 ##

## 方法 ##

## 事件 ##

<table style="margin:0px 0px 1rem; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; border-spacing:0px; width:730.4px; table-layout:fixed"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121); background-color:rgb(244,245,247)"> <span style="margin:0px; padding:0px">事件名</span></td> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 说明</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> expand</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 按钮开始展开</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> expanded</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 按钮完全展开（动画效果执行结束）</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> collapse</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 按钮开始收起</td> 
  </tr> 
 </tbody> 
</table>

# 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 ##

## Slot ##

# 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 ###

### tab-item ###

## Slot ##

### tabbar ###

### tab-item ###

# 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 ###

### tab-item ###

## Slot ##

### navbar ###

### tab-item ###

# 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 ##

## Slot ##

# 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 ##

## Slot ##

# 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 ##

## Slot ##

# 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 ##

# 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 ###

### tab-container-item ###

## Slot ##

### tab-container ###

### tab-container-item ###

# 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 ##

## Slot ##

# 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 ##

## Event ##

## Slot ##

# Checklist #

> 复选框列表，依赖 [cell 组件。][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 ##

# 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 ##

# 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 ##

## Slot ##

# 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 ##

## Slot ##

### npm 安装 ###

推荐使用 npm 的方式安装，它能更好地和 [webpack][] 打包工具配合使用。

npm i mint-ui -S

### CDN ###

目前可以通过 [unpkg.com/mint-ui][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 页面。

如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：[快速上手。][Link 1]

**关于事件绑定**

在 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 中写入以下内容：

以上代码便完成了 Mint UI 的引入。需要注意的是，样式文件需要单独引入。

### 按需引入 ###

借助 [babel-plugin-component][]，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

## 开始使用 ##

至此，一个基于 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 ##

> 下拉/上拉刷新，支持自定义 HTML 模板。

--------------------

## 引入 ##

import { Loadmore } from 'mint-ui';
    
    Vue.component(Loadmore.name, 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 模板

## 配置加载提示区域的文字 ##

## 自动检测 ##

## API ##

## Events ##

## Slot ##

Infinite scroll

> 无限滚动指令。

--------------------

## 引入 ##

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

## 例子 ##

## API ##

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 ##

# 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 ##

# 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 ##

## Slot ##

# 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 ##

## Slot ##

### mt-swipe ###

### mt-swipe-item ###

# Lazy load #

> 图片懒加载指令。

--------------------

## 引入 ##

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

## 例子 ##

为 `img` 元素添加 `v-lazy` 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。

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

若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给  `v-lazy`  指

<div id="container">

<ul>

<li v-for="item in list">

<img v-lazy.container="item">

</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 ##

## Slot ##

# 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 ##

## Slot ##

# 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>

## `change` 事件 ##

在 `change` 事件中，可以使用注册到 `picker` 实例上的一些方法：

## `slots` ##

绑定到 `slots` 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名

## API ##

## Slot ##

# Datetime picker #

> 日期时间选择器，支持自定义类型。

--------------------

## 引入 ##

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

## 例子 ##

`v-model` 属性为组件的绑定值。

`type` 属性表示 `datetime-picker` 组件的类型，它有三个可能的值：

`datetime-picker` 提供了两个供外部调用的方法：`open` 和 `close`，分别用于打开和关闭选择器。

可以为选项提供自定义模板。模板须为一个包含了 `{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 ##

<table style="margin:0px 0px 1rem; padding:0px; border:1px solid silver; border-collapse:collapse; word-break:break-word; border-spacing:0px; width:730.4px; max-width:100%; table-layout:fixed"> 
 <thead style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 参数</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247)"> 说明</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 类型</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:110px"> 可选值</th> 
   <th style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; text-align:left; color:rgb(101,107,121); font-weight:400; background-color:rgb(244,245,247); width:65px"> 默认值</th> 
  </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> type</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 组件的类型</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 'datetime', 'date', 'time'</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 'datetime'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> cancelText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 取消按钮文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '取消'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> confirmText</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 确定按钮文本</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '确定'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> startDate</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期的最小可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Date</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 十年前的 1 月 1 日</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> endDate</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期的最大可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Date</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 十年后的 12 月 31 日</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> startHour</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时的最小可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 0</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> endHour</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时的最大可选值</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> Number</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 23</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> yearFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 年份模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> monthFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 月份模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> dateFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 日期模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> hourFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 小时模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> minuteFormat</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> 分钟模板</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> String</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> &nbsp;</td> 
   <td style="margin:0px; padding:8px; border:1px solid rgb(238,238,238); border-collapse:collapse; vertical-align:top; color:rgb(101,107,121)"> '{value}'</td> 
  </tr> 
 </tbody> 
</table>

## Events ##

# Index List #

> 索引列表，可由右侧索引导航快速定位到相应的内容。

--------------------

## 引入 ##

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

## 例子 ##

当手指在右侧导航中滑动时，会在列表中间显示一个目前索引值的提示符。若不需要提示符，只需将 `show-indicator`设为 `false`

<mt-index-list :show-indicator="false">
      ...
    </mt-index-list>

## API ##

### mt-index-list ###

### mt-index-section ###

## Slot ##

### mt-index-list ###

### 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>

设置参数和事件，以及手动触发事件

## 选项 ##

## 方法 ##

## 事件 ##

# Header #

> 顶部导航栏，支持显示按钮、自定义文字和固定在顶部。

--------------------

## 引入 ##

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

## 例子 ##

固定在页面顶部

<mt-header fixed title="固定在顶部"></mt-header>

设置 `left` 或 `right` slot

设置多个按钮

## API ##

## Slot ##

# Tabbar #

> 底部选项卡，点击 tab 会切换显示的页面。依赖 tab-item 组件。

--------------------

## 引入 ##

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

## 例子 ##

搭配 [tab-container][] 组件使用

## API ##

### tabbar ###

### tab-item ###

## Slot ##

### tabbar ###

### tab-item ###

# Navbar #

> 顶部选项卡，与 [Tabbar][] 类似，依赖 tab-item 组件。

--------------------

## 引入 ##

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

## 例子 ##

搭配 [tab-container][] 组件使用

## API ##

### navbar ###

### tab-item ###

## Slot ##

### navbar ###

### tab-item ###

# 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 ##

## Slot ##

# 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 ##

## Slot ##

# 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 ##

## Slot ##

# Spinner #

> 加载动画，可指定显示类型、尺寸和颜色。

--------------------

## 引入 ##

import { Spinner } from 'mint-ui';
    
    Vue.component(Spinner.name, 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 ##

# tab-container #

> 面板，可切换显示子页面。

--------------------

## 引入 ##

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

## 例子 ##

改变 ative 的值，与 `<tab-container-item>` 的 id 一致即显示对应页面。

## API ##

### tab-container ###

### tab-container-item ###

## Slot ##

### tab-container ###

### tab-container-item ###

# 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 ##

## Slot ##

# 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 ##

## Event ##

## Slot ##

# Checklist #

> 复选框列表，依赖 [cell 组件。][cell]

--------------------

## 引入 ##

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

## 例子 ##

基本用法

<mt-checklist title="复选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-checklist>

设置禁用选项

<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 ##

# Radio #

> 单选框列表，依赖 [cell][] 组件。

--------------------

## 引入 ##

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

## 例子 ##

基本用法

<mt-radio title="单选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-radio>

设置禁用选项

<mt-radio title="单选框列表" v-model="value" :options="options"></mt-radio>

单选框右对齐

<mt-radio align="right" title="右对齐" v-model="value" :options="options"></mt-radio>

## API ##

# Field #

> 表单编辑器。

--------------------

## 引入 ##

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

## 例子 ##

基础用法

设置校验状态

自定义内容（例如添加验证码）

<mt-field label="验证码" v-model="captcha">
      <img src="../assets/100x100.png" height="45px" width="100px"></mt-field>

## API ##

## Slot ##

# 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 ##

## Slot ##

[webpack]: https://webpack.js.org/
[unpkg.com_mint-ui]: https://unpkg.com/mint-ui/
[Link 1]: http://mint-ui.github.io/docs/#/zh-cn2/quickstart
[babel-plugin-component]: https://github.com/QingWei-Li/babel-plugin-component
[tab-container]: http://mint-ui.github.io/docs/#/zh-cn2/tab-container
[Tabbar]: http://mint-ui.github.io/docs/#/zh-cn2/tabbar
[cell]: http://mint-ui.github.io/docs/#/zh-cn2/cell