首页 > 代码库 > vue mint ui 手册文档对于墙的恐惧

vue mint ui 手册文档对于墙的恐惧

2024-09-25 07:55:39 277人阅读

npm 安装

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

npm i mint-ui -S

CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

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

Hello world

通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。

<!DOCTYPE html><html><head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
  <div id="app">
    <mt-button @click.native="handleClick">按钮</mt-button>
  </div></body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: ‘#app‘,
      methods: {
        handleClick: function() {
          this.$toast(‘Hello world!‘)
        }
      }
    })
  </script></html>

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

关于事件绑定

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是对于其他组件，还是需要添加 .native 修饰符。

快速上手

本节将介绍如何在项目中使用 Mint UI。

使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

引入 Mint UI

你可以引入整个 Mint UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

完整引入

在 main.js 中写入以下内容：

import Vue from ‘vue‘import MintUI from ‘mint-ui‘import ‘mint-ui/lib/style.css‘import App from ‘./App.vue‘

Vue.use(MintUI)

new Vue({
  el: ‘#app‘,
  components: { App }
})

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

按需引入

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

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

import Vue from ‘vue‘import { Button, Cell } from ‘mint-ui‘import App from ‘./App.vue‘

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: ‘#app‘,
  components: { App }
})

开始使用

至此，一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

npm run dev

编译：

npm run build

各个组件的使用方法请参阅它们各自的文档。

Toast

简短的消息提示框，支持自定义位置、持续时间和样式。

引入

import { Toast } from ‘mint-ui‘;

例子

基本用法

Toast(‘提示信息‘);

在调用 Toast 时传入一个对象即可配置更多选项

Toast({
  message: ‘提示‘,
  position: ‘bottom‘,
  duration: 5000
});

若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast（图标需自行准备）

Toast({
  message: ‘操作成功‘,
  iconClass: ‘icon icon-success‘
});

执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast

let instance = Toast(‘提示信息‘);
setTimeout(() => {
  instance.close();
}, 2000);

API

参数	说明	类型	可选值	默认值
message	文本内容	String
position	Toast 的位置	String	‘top‘ ‘bottom‘ ‘middle‘	‘middle‘
duration	持续时间（毫秒），若为 -1 则不会自动关闭	Number		3000
className	Toast 的类名。可以为其添加样式	String
iconClass	icon 图标的类名	String

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

引入

import { Loadmore } from ‘mint-ui‘;

Vue.component(Loadmore.name, Loadmore);

例子

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul></mt-loadmore>

以列表顶部的下拉刷新为例：按住列表，下拉一定距离（通过 topDistance 配置）后释放，被指定为 top-method 的方法就会执行

loadTop() {
  ...// 加载更多数据
  this.$refs.loadmore.onTopLoaded();
}

注意在这个方法的最后需要手动调用 loadmore 的 onTopLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

列表底部的上拉刷新与之类似

loadBottom() {
  ...// 加载更多数据
  this.allLoaded = true;// 若数据已全部获取完毕
  this.$refs.loadmore.onBottomLoaded();
}

唯一的区别是，当底部数据全部获取完毕时，可以将绑定到组件 bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。

手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 distance-index 参数配置，默认值为 2。

自定义 HTML 模板

可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板

<template>
  <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span>
      <span v-show="topStatus === ‘loading‘">Loading...</span>
    </div>
  </mt-loadmore></template><script>
  export default {
    data() {
      return {
        topStatus: ‘‘,
        // ...
      };
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      // ...
    },
    // ...
  };
</script>

比如需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 slot 属性为 top，类名为 mint-loadmore-top。当用户滑动组件时，组件会有以下几个状态：

pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置
drop：按下的距离不小于 topDistance，此时释放会触发 top-method
loading：组件已被释放，top-method 正在执行每当组件的状态发生变化时，loadmore 都会触发 top-status-change 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 handleTopChange 方法来处理组件状态的变化。

配置加载提示区域的文字

在不使用自定义 HTML 模板的情况下，可以配置 loadmore 本身自带的加载提示区域的文字。以列表顶部为例，对应于 status 的三个状态，可配置的属性依次为 topPullText、topDropText 和 topLoadingText。与之对应的底部属性为 bottomPullText、bottomDropText 和 bottomLoadingText。

自动检测

loadmore 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 bottom-method，直到撑满容器为止。如果不希望使用这一机制，可以将 auto-fill 设为 false。

API

参数	说明	类型	默认值
autoFill	若为真，`loadmore` 会自动检测并撑满其容器	Boolean	true
distanceIndex	手指移动与组件移动距离的比值	Number	2
maxDistance	组件可移动的最大距离（像素），若为 0 则不限制	Number	0
topPullText	`topStatus` 为 `pull` 时加载提示区域的文字	String	‘下拉刷新‘
topDropText	`topStatus` 为 `drop` 时加载提示区域的文字	String	‘释放更新‘
topLoadingText	`topStatus` 为 `loading` 时加载提示区域的文字	String	‘加载中...‘
topDistance	触发 `topMethod` 的下拉距离阈值（像素）	Number	70
topMethod	下拉刷新执行的方法	Function
bottomPullText	`bottomStatus` 为 `pull` 时加载提示区域的文字	String	‘上拉刷新‘
bottomDropText	`bottomStatus` 为 `drop` 时加载提示区域的文字	String	‘释放更新‘
bottomLoadingText	`bottomStatus` 为 `loading` 时加载提示区域的文字	String	‘加载中...‘
bottomDistance	触发 `bottomMethod` 的上拉距离阈值（像素）	Number	70
bottomMethod	上拉刷新执行的方法	Function
bottomAllLoaded	若为真，则 `bottomMethod` 不会被再次触发	Boolean	false

Events

事件名称	说明	回调参数
top-status-change	组件顶部状态发生变化时的回调函数	组件顶部的新状态名
bottom-status-change	组件底部状态发生变化时的回调函数	组件底部的新状态名

Slot

name	描述
-	数据列表
top	自定义顶部加载提示区域 HTML 模板
bottom	自定义底部加载提示区域 HTML 模板

Infinite scroll

无限滚动指令。

引入

import { InfiniteScroll } from ‘mint-ui‘;

Vue.use(InfiniteScroll);

例子

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

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li></ul>

loadMore() {
  this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    for (let i = 1; i <= 10; i++) {
      this.list.push(last + i);
    }
    this.loading = false;
  }, 2500);
}

API

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	若为真，则无限滚动不会被触发	Boolean		false
infinite-scroll-distance	触发加载方法的滚动距离阈值（像素）	Number		0
infinite-scroll-immediate-check	若为真，则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。	Boolean		true
infinite-scroll-listen-for-event	一个 event，被执行时会立即检查是否需要执行加载方法。	Function

Message box

弹出式提示框，有多种交互形式。

引入

import { MessageBox } from ‘mint-ui‘;

例子

以标题与内容字符串为参数进行调用

MessageBox(‘提示‘, ‘操作成功‘);

或者传入一个对象

MessageBox({
  title: ‘提示‘,
  message: ‘确定执行此操作?‘,
  showCancelButton: true
});

此外，MessageBox 还提供了 alert、confirm 和 prompt 三个方法，它们都返回一个 Promise

MessageBox.alert(message, title);

MessageBox.alert(‘操作成功‘).then(action => {
  ...
});

MessageBox.confirm(message, title);

MessageBox.confirm(‘确定执行此操作?‘).then(action => {
  ...
});

MessageBox.prompt(message, title);

MessageBox.prompt(‘请输入姓名‘).then(({ value, action }) => {
  ...
});

在 prompt 中，若用户点击了取消按钮，则 Promise 的状态会变为 rejected

API

参数	说明	类型	可选值	默认值
title	提示框的标题	String
message	提示框的内容	String
showConfirmButton	是否显示确认按钮	Boolean		true
showCancelButton	是否显示取消按钮	Boolean		false
confirmButtonText	确认按钮的文本	String
confirmButtonHighlight	是否将确认按钮的文本加粗显示	Boolean		false
confirmButtonClass	确认按钮的类名	String
cancelButtonText	取消按钮的文本	String
cancelButtonHighlight	是否将取消按钮的文本加粗显示	Boolean		false
cancelButtonClass	取消按钮的类名	String
closeOnClickModal	是否在点击遮罩时关闭提示光	Boolean	true (alert 为 false)
showInput	是否显示一个输入框	Boolean		false
inputType	输入框的类型	String		‘text‘
inputValue	输入框的值	String
inputPlaceholder	输入框的占位符	String

Action sheet

操作表，从屏幕下方移入。

引入

import { Actionsheet } from ‘mint-ui‘;

Vue.component(Actionsheet.name, Actionsheet);

例子

actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 actionsheet 的显示与隐藏。

<mt-actionsheet
  :actions="actions"
  v-model="sheetVisible"></mt-actionsheet>

API

参数	说明	类型	可选值	默认值
actions	菜单项数组	Array
cancelText	取消按钮的文本。若设为空字符串，则不显示取消按钮	String		‘取消‘
closeOnClickModal	是否可以通过点击 modal 层来关闭 `actionsheet`	Boolean		true

Popup

弹出框，可自定义内容。

引入

import { Popup } from ‘mint-ui‘;

Vue.component(Popup.name, Popup);

例子

position 属性指定了 popup 的位置。比如，position 为 ‘bottom‘ 时，popup 会从屏幕下方移入，并最终固定在屏幕下方。移入/移出的动效会根据 position 的不同而自动改变，无需手动配置。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 popup 的显示与隐藏。

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

若省略 position 属性，则 popup 会相对于屏幕居中显示（若不想让其居中，可通过 CSS 对其重新定位）。此时建议将动效设置为 popup-fade，这样在显示/隐藏时会有淡入/淡出效果。

<mt-popup
  v-model="popupVisible"
  popup-transition="popup-fade">
  ...
</mt-popup>

API

参数	说明	类型	可选值	默认值
position	`popup` 的位置。省略则居中显示	String	‘top‘ ‘right‘ ‘bottom‘ ‘left‘
pop-transition	显示/隐藏时的动效，仅在省略 `position` 时可配置	String	‘popup-fade‘
modal	是否创建一个 modal 层	Boolean		true
closeOnClickModal	是否可以通过点击 modal 层来关闭 `popup`	Boolean		true

Slot

name	描述
-	弹出框的内容

Swipe

轮播图，可自定义轮播时间间隔、动画时长等。

引入

import { Swipe, SwipeItem } from ‘mint-ui‘;

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

例子

基础用法

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

隐藏 indicators

<mt-swipe :show-indicators="false">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

取消自动播放

<mt-swipe :auto="0">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

change 事件

轮播图切换时会触发 change 事件，参数为切入轮播图的索引

<mt-swipe @change="handleChange">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

methods: {
  handleChange(index) {
    ...
  }
}

API

参数	说明	类型	默认值
speed	动画持时（毫秒）	Number	300
auto	自动播放的时间间隔（毫秒）	Number	3000
defaultIndex	初始显示的轮播图的索引	Number	0
continuous	是否可以循环播放	Boolean	true
showIndicators	是否显示 indicators	Boolean	true
prevent	是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能	Boolean	false
stopPropagation	是否在 touchstart 事件触发时阻止冒泡。	Boolean	false

Slot

mt-swipe

name	描述
-	一个或多个 `mt-swipe-item` 组件

mt-swipe-item

name	描述
-	单个轮播图的内容

Lazy load

图片懒加载指令。

引入

import { Lazyload } from ‘mint-ui‘;

Vue.use(Lazyload);

例子

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

<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li></ul>

image[lazy=loading] {

  width: 40px;

  height: 300px;

  margin: auto;

}

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

<ul>

</li>

</ul></div>

Range

滑块，支持自定义步长、区间等。

引入

import { Range } from ‘mint-ui‘;

Vue.component(Range.name, Range);

例子

将一个本地变量与 range 的 value 属性同步即可实现双向绑定

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

更多的配置项

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

可在滑块两侧显示文字

<mt-range v-model="rangeValue">
  <div slot="start">0</div>
  <div slot="end">100</div></mt-range>

API

参数	说明	类型	默认值
value	滑块的值	Number
min	最小值	Number	0
max	最大值	Number	100
step	步长	Number	1
disabled	是否禁用	Boolean	false
barHeight	滑槽的线宽（像素）	Number	1

Slot

name	描述
start	滑块左侧 DOM
end	滑块右侧 DOM

Progress

进度条。

引入

import { Progress } from ‘mint-ui‘;

Vue.component(Progress.name, Progress);

例子

传入 value 作为进度条的值。可自定义它的线宽

<mt-progress :value="20" :bar-height="5"></mt-progress>

可在进度条两侧显示文字

<mt-progress :value="60">
  <div slot="start">0%</div>
  <div slot="end">100%</div></mt-progress>

API

参数	说明	类型	可选值	默认值
value	进度条的值（%）	Number
barHeight	进度条的线宽（像素）	Number		1

Slot

name	描述
start	进度条左侧 DOM
end	进度条右侧 DOM

Picker

选择器，支持多 slot 联动。

引入

import { Picker } from ‘mint-ui‘;

Vue.component(Picker.name, Picker);

例子

传入 slots，当被选中的值发生变化时触发 change 事件。change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: [‘2015-01‘, ‘2015-02‘, ‘2015-03‘, ‘2015-04‘, ‘2015-05‘, ‘2015-06‘],
          className: ‘slot1‘,
          textAlign: ‘right‘
        }, {
          divider: true,
          content: ‘-‘,
          className: ‘slot2‘
        }, {
          flex: 1,
          values: [‘2015-01‘, ‘2015-02‘, ‘2015-03‘, ‘2015-04‘, ‘2015-05‘, ‘2015-06‘],
          className: ‘slot3‘,
          textAlign: ‘left‘
        }
      ]
    };
  }
};

`change` 事件

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

getSlotValue(index)：获取给定 slot 目前被选中的值
setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
getSlotValues(index)：获取给定 slot 的备选值数组
setSlotValues(index, values)：设定给定 slot 的备选值数组
getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中

`slots`

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

key	描述
divider	对应 slot 是否为分隔符
content	分隔符 slot 的显示文本
values	对应 slot 的备选值数组。若为对象数组，则需在 `mt-picker` 标签上设置 `value-key` 属性来指定显示的字段名
defaultIndex	对应 slot 初始选中值，需传入其在 values 数组中的序号，默认为 0
textAlign	对应 slot 的对齐方式
flex	对应 slot CSS 的 flex 值
className	对应 slot 的类名

API

参数	说明	类型	默认值
slots	slot 对象数组	Array	[]
valueKey	当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名	String	‘‘
showToolbar	是否在组件顶部显示一个 toolbar，内容自定义	Boolean	false
visibleItemCount	slot 中可见备选值的个数	Number	5
itemHeight	每个 slot 的高度	Number	36

Slot

name	描述
-	当 showToolbar 为 true 时，toolbar 中的内容

Datetime picker

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

引入

import { DatetimePicker } from ‘mint-ui‘;

Vue.component(DatetimePicker.name, DatetimePicker);

例子

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

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

datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串

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

<template>
  <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue">
  </mt-datetime-picker></template>

<script>
  export default {
    methods: {
      openPicker() {
        this.$refs.picker.open();
      }
    }
  };
</script>

可以为选项提供自定义模板。模板须为一个包含了 {value} 的字符串，{value} 会被解析为相应选项的值。

<mt-datetime-picker
  v-model="pickerVisible"
  type="date"
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日"></mt-datetime-picker>

当点击确认按钮时会触发 confirm 事件，参数为当前 value 的值。

<mt-datetime-picker
  v-model="pickerVisible"
  type="time"
  @confirm="handleConfirm"></mt-datetime-picker>

API

参数	说明	类型	可选值	默认值
type	组件的类型	String	‘datetime‘, ‘date‘, ‘time‘	‘datetime‘
cancelText	取消按钮文本	String		‘取消‘
confirmText	确定按钮文本	String		‘确定‘
startDate	日期的最小可选值	Date		十年前的 1 月 1 日
endDate	日期的最大可选值	Date		十年后的 12 月 31 日
startHour	小时的最小可选值	Number		0
endHour	小时的最大可选值	Number		23
yearFormat	年份模板	String		‘{value}‘
monthFormat	月份模板	String		‘{value}‘
dateFormat	日期模板	String		‘{value}‘
hourFormat	小时模板	String		‘{value}‘
minuteFormat	分钟模板	String		‘{value}‘

Events

事件名称	说明	回调参数
confirm	点击确认按钮时的回调函数	目前的选择值

Index List

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

引入

import { IndexList, IndexSection } from ‘mint-ui‘;

Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);

例子

<mt-index-list>
  <mt-index-section index="A">
    <mt-cell title="Aaron"></mt-cell>
    <mt-cell title="Alden"></mt-cell>
    <mt-cell title="Austin"></mt-cell>
  </mt-index-section>
  <mt-index-section index="B">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
  ...
  <mt-index-section index="Z">
    <mt-cell title="Zack"></mt-cell>
    <mt-cell title="Zane"></mt-cell>
  </mt-index-section></mt-index-list>

mt-index-section 与右侧导航中的索引一一对应，mt-index-section 的 index 属性即为与其对应的索引的显示文本。mt-index-section 标签内可为任意自定义内容。

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

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

API

mt-index-list

参数	说明	类型	可选值	默认值
height	组件的高度。若不指定，则自动延伸至视口底	Number
showIndicator	是否显示索引值提示符	Boolean		true

mt-index-section

参数	说明	类型	可选值	默认值
index	索引值（必需参数）	String

Slot

mt-index-list

name	描述
-	一个或多个 `mt-index-section` 组件

mt-index-section

name	描述
-	单个 `mt-index-section` 的内容

调色板按钮

引入

import { PaletteButton } from ‘mint-ui‘;

Vue.component(PaletteButton.name, PaletteButton);

例子

基本用法

    <mt-palette-button content="+">
      <div class="my-icon-button"></div>
      <div class="my-icon-button"></div>
      <div class="my-icon-button"></div>
    </mt-palette-button>

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

    methods: {
      main_log(val) {
        console.log(‘main_log‘, val);
      },
      sub_log(val) {
        console.log(‘sub_log‘, val);
        this.$refs.target_1.collapse();
      }
    }

    <mt-palette-button content="+" @expand="main_log(‘expand‘)" @expanded="main_log(‘expanded‘)" @collapse="main_log(‘collapse‘)"
      direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"
      style="left:30px;">
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
    </mt-palette-button>

选项

参数	说明	类型	可选值	默认值
content	主按钮内容	String
offset	角度偏移量	Number		Math.PI / 4
direction	按钮展开方向	string	lt, t, rt, r, rb, b, lb, l	lt
radius	按钮展开半径	Number		90
mainButtonStyle	主按钮样式	String

方法

方法名	说明
toggle	切换按钮展开/收起状态
expand	展开按钮
collapse	收起按钮

事件

事件名	说明
expand	按钮开始展开
expanded	按钮完全展开（动画效果执行结束）
collapse	按钮开始收起

Header

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

引入

import { Header } from ‘mint-ui‘;

Vue.component(Header.name, Header);

例子

固定在页面顶部

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

设置 left 或 right slot

<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button></mt-header>

设置多个按钮

<mt-header title="多个按钮">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
    <mt-button @click="handleClose">关闭</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button></mt-header>

API

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean		false
title	标题	String

Slot

name	描述
left	左边显示元素
right	右边显示元素

Tabbar

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

引入

import { Tabbar, TabItem } from ‘mint-ui‘;

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

例子

搭配 tab-container 组件使用

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item></mt-tabbar>

API

tabbar

参数	说明	类型	可选值	默认值
fixed	固定在页面底部	Boolean		false
value	返回当前选中的 tab-item 的 id	*

tab-item

参数	说明	类型	可选值	默认值
id	选中后的返回值	*

Slot

tabbar

name	描述
-	内容

tab-item

name	描述
-	显示文字
icon	icon 图标

Navbar

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

引入

import { Navbar, TabItem } from ‘mint-ui‘;

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);

例子

搭配 tab-container 组件使用

<mt-navbar v-model="selected">
  <mt-tab-item id="1">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
  <mt-tab-item id="3">选项三</mt-tab-item></mt-navbar>

<!-- tab-container --><mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="n in 10" :title="‘内容 ‘ + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <mt-cell v-for="n in 4" :title="‘测试 ‘ + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <mt-cell v-for="n in 6" :title="‘选项 ‘ + n" />
  </mt-tab-container-item></mt-tab-container>

API

navbar

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean		false
value	返回当前选中的 tab-item 的 id	*

tab-item

参数	说明	类型	可选值	默认值
id	选中后的返回值	*

Slot

navbar

name	描述
-	内容

tab-item

name	描述
-	显示文字
icon	icon 图标

Button

按钮，提供几种基础样式和尺寸，可自定义图标。

引入

import { Button } from ‘mint-ui‘;

Vue.component(Button.name, Button);

例子

改变颜色

<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>

改变大小

<mt-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按钮

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

幽灵按钮

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

带图标

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

自定义图标

<mt-button>
  <img src="../assets/100x100.png" height="20" width="20" slot="icon">
  带自定义图标
</mt-button>

绑定 click 事件

<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>

API

参数	说明	类型	可选值	默认值
plain	幽灵按钮	Boolean		false
disabled	禁用状态	Boolean		false
type	按钮显示样式	String	default, primary, danger	default
size	尺寸	String	small, normal, large	normal
icon	图标	String	more, back

Slot

name	描述
-	显示的文本内容
icon	自定义显示的图标

Cell

单元格，可用作展示列表信息、链接或者表单等。

引入

import { Cell } from ‘mint-ui‘;

Vue.component(Cell.name, Cell);

例子

基础用法

<mt-cell title="标题文字"></mt-cell><mt-cell title="标题文字" value="说明文字"></mt-cell>

可点击的链接

<mt-cell
  title="标题文字"
  to="//github.com"
  is-link
  value="带链接"></mt-cell>

带图标

<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>

带自定义图标

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

自定义内容

<mt-cell title="标题文字" is-link>
  <span style="color: green">这里是元素</span></mt-cell>

带备注信息

<mt-cell title="标题" label="描述信息" is-link></mt-cell>

API

参数	说明	类型	可选值
icon	图标	String	back, more
title	标题	String
to	跳转链接	String
value	内容	*
label	备注信息，显示在标题下方	String
is-link	链接，会显示箭头图标。搭配 to 属性使用	Boolean

Slot

name	描述
-	自定义显示内容
title	自定义标题
icon	自定义图标

Cell Swipe

可滑动的单元格，用法同 cell。

引入

import { CellSwipe } from ‘mint-ui‘;

Vue.component(CellSwipe.name, CellSwipe);

例子

增加右滑动按钮

<mt-cell-swipe
  title="标题文字"
  :right="[
    {
      content: ‘Delete‘,
      style: { background: ‘red‘, color: ‘#fff‘ },
      handler: () => this.$messagebox(‘delete‘)
    }
  ]"></mt-cell-swipe>

content 可以是 HTML 或者纯文本。

API

参数	说明	类型	可选值
icon	图标	String	back, more
title	标题	String
to	跳转链接	String
value	内容	*
label	备注信息，显示在标题下方	String
is-link	链接，会显示箭头图标。搭配 to 属性使用	Boolean
left	按钮组, `{ content, style, handler }`	Object[]
right	按钮组, `{ content, style, handler }`	Object[]

Slot

name	描述
-	自定义显示内容
title	自定义标题
icon	自定义图标

Spinner

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

引入

import { Spinner } from ‘mint-ui‘;

Vue.component(Spinner.name, Spinner);

例子

指定类型

<mt-spinner type="snake"></mt-spinner><mt-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="fading-circle"></mt-spinner>

<!-- 或者接受传入类型的序号 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>

指定颜色

<mt-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="yellow"></mt-spinner>

指定尺寸

<mt-spinner :size="60"></mt-spinner>

API

参数	说明	类型	可选值	默认值
type	显示类型，提供四种风格，可以指定名称或者序号	String、Number	snake double-bounce triple-bounce fading-circle	snake
color	颜色，接受 hex、rgb 等颜色值	String		#ccc
size	尺寸，单位 px	Number		28

tab-container

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

引入

import { TabContainer, TabContainerItem } from ‘mint-ui‘;

Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

例子

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

<mt-tab-container v-model="active">
  <mt-tab-container-item id="tab-container1">
    <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2">
    <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
  </mt-tab-container-item></mt-tab-container>

API

tab-container

参数	说明	类型	可选值	默认值
value	当前激活的 id	*
swipeable	显示滑动效果	Boolean		false

tab-container-item

参数	说明	类型	可选值	默认值
id	item 的 id	*

Slot

tab-container

name	描述
-	内容

tab-container-item

name	描述
-	内容

Search

搜索框，可显示搜索结果列表。

引入

import { Search } from ‘mint-ui‘;

Vue.component(Search.name, Search);

例子

基础用法

<mt-search v-model="value"></mt-search>

设置显示文字

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

带搜索结果

<mt-search v-model="value" :result.sync="result"></mt-search>

自定义搜索结果

<mt-search v-model="value">
  <mt-cell
    v-for="item in result"
    :title="item.title"
    :value="item.value">
  </mt-cell></mt-search>

API

参数	说明	类型	可选值	默认值
value	搜索结果绑定值	String
cancel-text	取消按钮文字	String		取消
placeholder	搜索框占位内容	String		搜索
result	搜索结果列表	Array
autofocus	自动聚焦	Boolean	-	false
show	始终显示搜索列表	Boolean	-	false

Slot

name	描述
-	自定义搜索结果列表

Switch

开关。

引入

import { Switch } from ‘mint-ui‘;

Vue.component(Switch.name, Switch);

例子

<mt-switch v-model="value"></mt-switch>

带显示内容

<mt-switch v-model="value">开关</mt-switch>

API

参数	说明	类型	可选值	默认值
value	绑定值	Boolean

Event

名称	返回值
change	checked: Boolean

Slot

name	描述
-	显示内容

Checklist

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

引入

import { Checklist } from ‘mint-ui‘;

Vue.component(Checklist.name, Checklist);

例子

基本用法

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

设置禁用选项

this.options = [
  {
    label: ‘被禁用‘,
    value: ‘值F‘,
    disabled: true
  },
  {
    label: ‘选中禁用‘,
    value: ‘选中禁用的值‘,
    disabled: true
  },
  {
    label: ‘选项A‘,
    value: ‘值A‘
  },
  {
    label: ‘选项B‘,
    value: ‘值B‘
  }
];

<mt-checklist
  v-model="value"
  :options="options"></mt-checklist>

设置最大可选数

<mt-checklist
  :max="2"
  v-model="value"
  :options="options"></mt-checklist>

选择框右对齐

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

API

参数	说明	类型	可选值	默认值
options	选择项，可直接传字符串数组或者对象数组	Array
value	绑定值	Array
title	标题，显示在列表上方	string
max	最多可选个数，超过后其他未选择的选项变成禁用状态	Number
align	复选框对其位置	String	left, right	left

Radio

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

引入

import { Radio } from ‘mint-ui‘;

Vue.component(Radio.name, Radio);

例子

基本用法

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

设置禁用选项

this.options = [
  {
    label: ‘被禁用‘,
    value: ‘值F‘,
    disabled: true
  },
  {
    label: ‘选项A‘,
    value: ‘值A‘
  },
  {
    label: ‘选项B‘,
    value: ‘值B‘
  }
];

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

单选框右对齐

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

API

参数	说明	类型	可选值	默认值
options	选择项	Array
value	绑定值	String
title	标题，显示在列表上方	string
align	单选框对其位置	String	left, right	left

Field

表单编辑器。

引入

import { Field } from ‘mint-ui‘;

Vue.component(Field.name, Field);

例子

基础用法

<mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field><mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field><mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field><mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field><mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field><mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>

设置校验状态

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

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

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

API

参数	说明	类型	可选值	默认值
type	输入框类型	String	text, number, email, url, tel, date, datetime, password, textarea	text
label	标签	String
value	绑定表单输入值	String
rows	类型为 textarea 时可指定高度（显示行数）	Number
placeholder	占位内容	String
disableClear	禁用 clear 按钮	Booean		false
readonly	readonly	Boolean		false
disabled	disabled	Boolean		false
state	校验状态	String	error, success, warning
attr	设置原生属性，例如 `:attr="{ maxlength: 10 }"`	Object

Slot

name	描述
-	显示的 HTML 内容

Badge

徽章，可指定颜色和尺寸。

引入

import { Badge } from ‘mint-ui‘;

Vue.component(Badge.name, Badge);

例子

指定尺寸

<mt-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定类型

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

指定颜色

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

API

参数	说明	类型	可选值	默认值
type	显示类型	String	primary, error, success, warning	primary
color	自定义颜色值	String		type 的颜色
size	尺寸	String	normal, large, small	normal

Slot

name	描述
-	显示内容

npm 安装

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

npm i mint-ui -S

CDN

目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

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

Hello world

通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。

<!DOCTYPE html><html><head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body>
  <div id="app">
    <mt-button @click.native="handleClick">按钮</mt-button>
  </div></body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: ‘#app‘,
      methods: {
        handleClick: function() {
          this.$toast(‘Hello world!‘)
        }
      }
    })
  </script></html>

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

关于事件绑定

在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符：

<my-component @click.native="handleClick">Click Me</my-component>

从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件：

<mt-button @click="handleButtonClick">Click Me</mt-button>

但是对于其他组件，还是需要添加 .native 修饰符。

快速上手

本节将介绍如何在项目中使用 Mint UI。

使用 vue-cli

npm install -g vue-cli

vue init webpack projectname

引入 Mint UI

你可以引入整个 Mint UI，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。

完整引入

在 main.js 中写入以下内容：

import Vue from ‘vue‘import MintUI from ‘mint-ui‘import ‘mint-ui/lib/style.css‘import App from ‘./App.vue‘

Vue.use(MintUI)

new Vue({
  el: ‘#app‘,
  components: { App }
})

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

按需引入

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}

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

import Vue from ‘vue‘import { Button, Cell } from ‘mint-ui‘import App from ‘./App.vue‘

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Cell)
 */

new Vue({
  el: ‘#app‘,
  components: { App }
})

开始使用

至此，一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：

npm run dev

编译：

npm run build

各个组件的使用方法请参阅它们各自的文档。

Toast

简短的消息提示框，支持自定义位置、持续时间和样式。

引入

import { Toast } from ‘mint-ui‘;

例子

基本用法

Toast(‘提示信息‘);

在调用 Toast 时传入一个对象即可配置更多选项

Toast({
  message: ‘提示‘,
  position: ‘bottom‘,
  duration: 5000
});

若需在文字上方显示一个 icon 图标，可以将图标的类名作为 iconClass 的值传给 Toast（图标需自行准备）

Toast({
  message: ‘操作成功‘,
  iconClass: ‘icon icon-success‘
});

执行 Toast 方法会返回一个 Toast 实例，每个实例都有 close 方法，用于手动关闭 Toast

let instance = Toast(‘提示信息‘);
setTimeout(() => {
  instance.close();
}, 2000);

API

参数	说明	类型	可选值	默认值
message	文本内容	String
position	Toast 的位置	String	‘top‘ ‘bottom‘ ‘middle‘	‘middle‘
duration	持续时间（毫秒），若为 -1 则不会自动关闭	Number		3000
className	Toast 的类名。可以为其添加样式	String
iconClass	icon 图标的类名	String

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

引入

import { Loadmore } from ‘mint-ui‘;

Vue.component(Loadmore.name, Loadmore);

例子

<mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}</li>
  </ul></mt-loadmore>

以列表顶部的下拉刷新为例：按住列表，下拉一定距离（通过 topDistance 配置）后释放，被指定为 top-method 的方法就会执行

loadTop() {
  ...// 加载更多数据
  this.$refs.loadmore.onTopLoaded();
}

注意在这个方法的最后需要手动调用 loadmore 的 onTopLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

列表底部的上拉刷新与之类似

loadBottom() {
  ...// 加载更多数据
  this.allLoaded = true;// 若数据已全部获取完毕
  this.$refs.loadmore.onBottomLoaded();
}

唯一的区别是，当底部数据全部获取完毕时，可以将绑定到组件 bottom-all-loaded 属性的变量赋值为 true，这样 bottom-method 就不会再次执行了。

手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 distance-index 参数配置，默认值为 2。

自定义 HTML 模板

可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板

<template>
  <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
    <div slot="top" class="mint-loadmore-top">
      <span v-show="topStatus !== ‘loading‘" :class="{ ‘rotate‘: topStatus === ‘drop‘ }">↓</span>
      <span v-show="topStatus === ‘loading‘">Loading...</span>
    </div>
  </mt-loadmore></template><script>
  export default {
    data() {
      return {
        topStatus: ‘‘,
        // ...
      };
    },
    methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      // ...
    },
    // ...
  };
</script>

pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置
drop：按下的距离不小于 topDistance，此时释放会触发 top-method
loading：组件已被释放，top-method 正在执行每当组件的状态发生变化时，loadmore 都会触发 top-status-change 方法，参数为组件目前的状态。因此可以像本例一样，使用一个 handleTopChange 方法来处理组件状态的变化。

配置加载提示区域的文字

自动检测

API

参数	说明	类型	默认值
autoFill	若为真，`loadmore` 会自动检测并撑满其容器	Boolean	true
distanceIndex	手指移动与组件移动距离的比值	Number	2
maxDistance	组件可移动的最大距离（像素），若为 0 则不限制	Number	0
topPullText	`topStatus` 为 `pull` 时加载提示区域的文字	String	‘下拉刷新‘
topDropText	`topStatus` 为 `drop` 时加载提示区域的文字	String	‘释放更新‘
topLoadingText	`topStatus` 为 `loading` 时加载提示区域的文字	String	‘加载中...‘
topDistance	触发 `topMethod` 的下拉距离阈值（像素）	Number	70
topMethod	下拉刷新执行的方法	Function
bottomPullText	`bottomStatus` 为 `pull` 时加载提示区域的文字	String	‘上拉刷新‘
bottomDropText	`bottomStatus` 为 `drop` 时加载提示区域的文字	String	‘释放更新‘
bottomLoadingText	`bottomStatus` 为 `loading` 时加载提示区域的文字	String	‘加载中...‘
bottomDistance	触发 `bottomMethod` 的上拉距离阈值（像素）	Number	70
bottomMethod	上拉刷新执行的方法	Function
bottomAllLoaded	若为真，则 `bottomMethod` 不会被再次触发	Boolean	false

Events

事件名称	说明	回调参数
top-status-change	组件顶部状态发生变化时的回调函数	组件顶部的新状态名
bottom-status-change	组件底部状态发生变化时的回调函数	组件底部的新状态名

Slot

name	描述
-	数据列表
top	自定义顶部加载提示区域 HTML 模板
bottom	自定义底部加载提示区域 HTML 模板

Infinite scroll

无限滚动指令。

引入

import { InfiniteScroll } from ‘mint-ui‘;

Vue.use(InfiniteScroll);

例子

<ul
  v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10">
  <li v-for="item in list">{{ item }}</li></ul>

loadMore() {
  this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    for (let i = 1; i <= 10; i++) {
      this.list.push(last + i);
    }
    this.loading = false;
  }, 2500);
}

API

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	若为真，则无限滚动不会被触发	Boolean		false
infinite-scroll-distance	触发加载方法的滚动距离阈值（像素）	Number		0
infinite-scroll-immediate-check	若为真，则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。	Boolean		true
infinite-scroll-listen-for-event	一个 event，被执行时会立即检查是否需要执行加载方法。	Function

Message box

弹出式提示框，有多种交互形式。

引入

import { MessageBox } from ‘mint-ui‘;

例子

以标题与内容字符串为参数进行调用

MessageBox(‘提示‘, ‘操作成功‘);

或者传入一个对象

MessageBox({
  title: ‘提示‘,
  message: ‘确定执行此操作?‘,
  showCancelButton: true
});

此外，MessageBox 还提供了 alert、confirm 和 prompt 三个方法，它们都返回一个 Promise

MessageBox.alert(message, title);

MessageBox.alert(‘操作成功‘).then(action => {
  ...
});

MessageBox.confirm(message, title);

MessageBox.confirm(‘确定执行此操作?‘).then(action => {
  ...
});

MessageBox.prompt(message, title);

MessageBox.prompt(‘请输入姓名‘).then(({ value, action }) => {
  ...
});

在 prompt 中，若用户点击了取消按钮，则 Promise 的状态会变为 rejected

API

参数	说明	类型	可选值	默认值
title	提示框的标题	String
message	提示框的内容	String
showConfirmButton	是否显示确认按钮	Boolean		true
showCancelButton	是否显示取消按钮	Boolean		false
confirmButtonText	确认按钮的文本	String
confirmButtonHighlight	是否将确认按钮的文本加粗显示	Boolean		false
confirmButtonClass	确认按钮的类名	String
cancelButtonText	取消按钮的文本	String
cancelButtonHighlight	是否将取消按钮的文本加粗显示	Boolean		false
cancelButtonClass	取消按钮的类名	String
closeOnClickModal	是否在点击遮罩时关闭提示光	Boolean	true (alert 为 false)
showInput	是否显示一个输入框	Boolean		false
inputType	输入框的类型	String		‘text‘
inputValue	输入框的值	String
inputPlaceholder	输入框的占位符	String

Action sheet

操作表，从屏幕下方移入。

引入

import { Actionsheet } from ‘mint-ui‘;

Vue.component(Actionsheet.name, Actionsheet);

例子

actions 属性绑定一个由对象组成的数组，每个对象有 name 和 method 两个键，name 为菜单项的文本，method 为点击该菜单项的回调函数。

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 actionsheet 的显示与隐藏。

<mt-actionsheet
  :actions="actions"
  v-model="sheetVisible"></mt-actionsheet>

API

参数	说明	类型	可选值	默认值
actions	菜单项数组	Array
cancelText	取消按钮的文本。若设为空字符串，则不显示取消按钮	String		‘取消‘
closeOnClickModal	是否可以通过点击 modal 层来关闭 `actionsheet`	Boolean		true

Popup

弹出框，可自定义内容。

引入

import { Popup } from ‘mint-ui‘;

Vue.component(Popup.name, Popup);

例子

将 v-model 绑定到一个本地变量，通过操作这个变量即可控制 popup 的显示与隐藏。

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

<mt-popup
  v-model="popupVisible"
  popup-transition="popup-fade">
  ...
</mt-popup>

API

参数	说明	类型	可选值	默认值
position	`popup` 的位置。省略则居中显示	String	‘top‘ ‘right‘ ‘bottom‘ ‘left‘
pop-transition	显示/隐藏时的动效，仅在省略 `position` 时可配置	String	‘popup-fade‘
modal	是否创建一个 modal 层	Boolean		true
closeOnClickModal	是否可以通过点击 modal 层来关闭 `popup`	Boolean		true

Slot

name	描述
-	弹出框的内容

Swipe

轮播图，可自定义轮播时间间隔、动画时长等。

引入

import { Swipe, SwipeItem } from ‘mint-ui‘;

Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

例子

基础用法

<mt-swipe :auto="4000">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

隐藏 indicators

<mt-swipe :show-indicators="false">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

取消自动播放

<mt-swipe :auto="0">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

change 事件

轮播图切换时会触发 change 事件，参数为切入轮播图的索引

<mt-swipe @change="handleChange">
  <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item></mt-swipe>

methods: {
  handleChange(index) {
    ...
  }
}

API

参数	说明	类型	默认值
speed	动画持时（毫秒）	Number	300
auto	自动播放的时间间隔（毫秒）	Number	3000
defaultIndex	初始显示的轮播图的索引	Number	0
continuous	是否可以循环播放	Boolean	true
showIndicators	是否显示 indicators	Boolean	true
prevent	是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能	Boolean	false
stopPropagation	是否在 touchstart 事件触发时阻止冒泡。	Boolean	false

Slot

mt-swipe

name	描述
-	一个或多个 `mt-swipe-item` 组件

mt-swipe-item

name	描述
-	单个轮播图的内容

Lazy load

图片懒加载指令。

引入

import { Lazyload } from ‘mint-ui‘;

Vue.use(Lazyload);

例子

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

<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li></ul>

image[lazy=loading] {

  width: 40px;

  height: 300px;

  margin: auto;

}

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

<ul>

</li>

</ul></div>

Range

滑块，支持自定义步长、区间等。

引入

import { Range } from ‘mint-ui‘;

Vue.component(Range.name, Range);

例子

将一个本地变量与 range 的 value 属性同步即可实现双向绑定

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

更多的配置项

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

可在滑块两侧显示文字

<mt-range v-model="rangeValue">
  <div slot="start">0</div>
  <div slot="end">100</div></mt-range>

API

参数	说明	类型	默认值
value	滑块的值	Number
min	最小值	Number	0
max	最大值	Number	100
step	步长	Number	1
disabled	是否禁用	Boolean	false
barHeight	滑槽的线宽（像素）	Number	1

Slot

name	描述
start	滑块左侧 DOM
end	滑块右侧 DOM

Progress

进度条。

引入

import { Progress } from ‘mint-ui‘;

Vue.component(Progress.name, Progress);

例子

传入 value 作为进度条的值。可自定义它的线宽

<mt-progress :value="20" :bar-height="5"></mt-progress>

可在进度条两侧显示文字

<mt-progress :value="60">
  <div slot="start">0%</div>
  <div slot="end">100%</div></mt-progress>

API

参数	说明	类型	可选值	默认值
value	进度条的值（%）	Number
barHeight	进度条的线宽（像素）	Number		1

Slot

name	描述
start	进度条左侧 DOM
end	进度条右侧 DOM

Picker

选择器，支持多 slot 联动。

引入

import { Picker } from ‘mint-ui‘;

Vue.component(Picker.name, Picker);

例子

传入 slots，当被选中的值发生变化时触发 change 事件。change 事件有两个参数，分别为当前 picker 的 vue 实例和各 slot 被选中的值组成的数组

<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>

export default {
  methods: {
    onValuesChange(picker, values) {
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    }
  },
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: [‘2015-01‘, ‘2015-02‘, ‘2015-03‘, ‘2015-04‘, ‘2015-05‘, ‘2015-06‘],
          className: ‘slot1‘,
          textAlign: ‘right‘
        }, {
          divider: true,
          content: ‘-‘,
          className: ‘slot2‘
        }, {
          flex: 1,
          values: [‘2015-01‘, ‘2015-02‘, ‘2015-03‘, ‘2015-04‘, ‘2015-05‘, ‘2015-06‘],
          className: ‘slot3‘,
          textAlign: ‘left‘
        }
      ]
    };
  }
};

`change` 事件

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

getSlotValue(index)：获取给定 slot 目前被选中的值
setSlotValue(index, value)：设定给定 slot 被选中的值，该值必须存在于该 slot 的备选值数组中
getSlotValues(index)：获取给定 slot 的备选值数组
setSlotValues(index, values)：设定给定 slot 的备选值数组
getValues()：获取所有 slot 目前被选中的值（分隔符 slot 除外）
setValues(values)：设定所有 slot 被选中的值（分隔符 slot 除外），该值必须存在于对应 slot 的备选值数组中

`slots`

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

key	描述
divider	对应 slot 是否为分隔符
content	分隔符 slot 的显示文本
values	对应 slot 的备选值数组。若为对象数组，则需在 `mt-picker` 标签上设置 `value-key` 属性来指定显示的字段名
defaultIndex	对应 slot 初始选中值，需传入其在 values 数组中的序号，默认为 0
textAlign	对应 slot 的对齐方式
flex	对应 slot CSS 的 flex 值
className	对应 slot 的类名

API

参数	说明	类型	默认值
slots	slot 对象数组	Array	[]
valueKey	当 values 为对象数组时，作为文本显示在 Picker 中的对应字段的字段名	String	‘‘
showToolbar	是否在组件顶部显示一个 toolbar，内容自定义	Boolean	false
visibleItemCount	slot 中可见备选值的个数	Number	5
itemHeight	每个 slot 的高度	Number	36

Slot

name	描述
-	当 showToolbar 为 true 时，toolbar 中的内容

Datetime picker

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

引入

import { DatetimePicker } from ‘mint-ui‘;

Vue.component(DatetimePicker.name, DatetimePicker);

例子

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

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

datetime: 日期时间选择器，可选择年、月、日、时、分，value 值为一个 Date 对象
date: 日期选择器，可选择年、月、日，value 值为一个 Date 对象
time: 时间选择器，可选择时、分，value 值为一个格式为 HH:mm 的字符串

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

<template>
  <mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue">
  </mt-datetime-picker></template>

<script>
  export default {
    methods: {
      openPicker() {
        this.$refs.picker.open();
      }
    }
  };
</script>

可以为选项提供自定义模板。模板须为一个包含了 {value} 的字符串，{value} 会被解析为相应选项的值。

<mt-datetime-picker
  v-model="pickerVisible"
  type="date"
  year-format="{value} 年"
  month-format="{value} 月"
  date-format="{value} 日"></mt-datetime-picker>

当点击确认按钮时会触发 confirm 事件，参数为当前 value 的值。

<mt-datetime-picker
  v-model="pickerVisible"
  type="time"
  @confirm="handleConfirm"></mt-datetime-picker>

API

参数	说明	类型	可选值	默认值
type	组件的类型	String	‘datetime‘, ‘date‘, ‘time‘	‘datetime‘
cancelText	取消按钮文本	String		‘取消‘
confirmText	确定按钮文本	String		‘确定‘
startDate	日期的最小可选值	Date		十年前的 1 月 1 日
endDate	日期的最大可选值	Date		十年后的 12 月 31 日
startHour	小时的最小可选值	Number		0
endHour	小时的最大可选值	Number		23
yearFormat	年份模板	String		‘{value}‘
monthFormat	月份模板	String		‘{value}‘
dateFormat	日期模板	String		‘{value}‘
hourFormat	小时模板	String		‘{value}‘
minuteFormat	分钟模板	String		‘{value}‘

Events

事件名称	说明	回调参数
confirm	点击确认按钮时的回调函数	目前的选择值

Index List

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

引入

import { IndexList, IndexSection } from ‘mint-ui‘;

Vue.component(IndexList.name, IndexList);
Vue.component(IndexSection.name, IndexSection);

例子

<mt-index-list>
  <mt-index-section index="A">
    <mt-cell title="Aaron"></mt-cell>
    <mt-cell title="Alden"></mt-cell>
    <mt-cell title="Austin"></mt-cell>
  </mt-index-section>
  <mt-index-section index="B">
    <mt-cell title="Baldwin"></mt-cell>
    <mt-cell title="Braden"></mt-cell>
  </mt-index-section>
  ...
  <mt-index-section index="Z">
    <mt-cell title="Zack"></mt-cell>
    <mt-cell title="Zane"></mt-cell>
  </mt-index-section></mt-index-list>

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

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

API

mt-index-list

参数	说明	类型	可选值	默认值
height	组件的高度。若不指定，则自动延伸至视口底	Number
showIndicator	是否显示索引值提示符	Boolean		true

mt-index-section

参数	说明	类型	可选值	默认值
index	索引值（必需参数）	String

Slot

mt-index-list

name	描述
-	一个或多个 `mt-index-section` 组件

mt-index-section

name	描述
-	单个 `mt-index-section` 的内容

调色板按钮

引入

import { PaletteButton } from ‘mint-ui‘;

Vue.component(PaletteButton.name, PaletteButton);

例子

基本用法

    <mt-palette-button content="+">
      <div class="my-icon-button"></div>
      <div class="my-icon-button"></div>
      <div class="my-icon-button"></div>
    </mt-palette-button>

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

    methods: {
      main_log(val) {
        console.log(‘main_log‘, val);
      },
      sub_log(val) {
        console.log(‘sub_log‘, val);
        this.$refs.target_1.collapse();
      }
    }

    <mt-palette-button content="+" @expand="main_log(‘expand‘)" @expanded="main_log(‘expanded‘)" @collapse="main_log(‘collapse‘)"
      direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"
      style="left:30px;">
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(1)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(2)"></div>
      <div class="my-icon-button indexicon icon-popup" @touchstart="sub_log(3)"></div>
    </mt-palette-button>

选项

参数	说明	类型	可选值	默认值
content	主按钮内容	String
offset	角度偏移量	Number		Math.PI / 4
direction	按钮展开方向	string	lt, t, rt, r, rb, b, lb, l	lt
radius	按钮展开半径	Number		90
mainButtonStyle	主按钮样式	String

方法

方法名	说明
toggle	切换按钮展开/收起状态
expand	展开按钮
collapse	收起按钮

事件

事件名	说明
expand	按钮开始展开
expanded	按钮完全展开（动画效果执行结束）
collapse	按钮开始收起

Header

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

引入

import { Header } from ‘mint-ui‘;

Vue.component(Header.name, Header);

例子

固定在页面顶部

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

设置 left 或 right slot

<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button></mt-header>

设置多个按钮

<mt-header title="多个按钮">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
    <mt-button @click="handleClose">关闭</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button></mt-header>

API

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean		false
title	标题	String

Slot

name	描述
left	左边显示元素
right	右边显示元素

Tabbar

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

引入

import { Tabbar, TabItem } from ‘mint-ui‘;

Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

例子

搭配 tab-container 组件使用

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item></mt-tabbar>

API

tabbar

参数	说明	类型	可选值	默认值
fixed	固定在页面底部	Boolean		false
value	返回当前选中的 tab-item 的 id	*

tab-item

参数	说明	类型	可选值	默认值
id	选中后的返回值	*

Slot

tabbar

name	描述
-	内容

tab-item

name	描述
-	显示文字
icon	icon 图标

Navbar

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

引入

import { Navbar, TabItem } from ‘mint-ui‘;

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);

例子

搭配 tab-container 组件使用

<mt-navbar v-model="selected">
  <mt-tab-item id="1">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
  <mt-tab-item id="3">选项三</mt-tab-item></mt-navbar>

<!-- tab-container --><mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <mt-cell v-for="n in 10" :title="‘内容 ‘ + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <mt-cell v-for="n in 4" :title="‘测试 ‘ + n" />
  </mt-tab-container-item>
  <mt-tab-container-item id="3">
    <mt-cell v-for="n in 6" :title="‘选项 ‘ + n" />
  </mt-tab-container-item></mt-tab-container>

API

navbar

参数	说明	类型	可选值	默认值
fixed	固定在页面顶部	Boolean		false
value	返回当前选中的 tab-item 的 id	*

tab-item

参数	说明	类型	可选值	默认值
id	选中后的返回值	*

Slot

navbar

name	描述
-	内容

tab-item

name	描述
-	显示文字
icon	icon 图标

Button

按钮，提供几种基础样式和尺寸，可自定义图标。

引入

import { Button } from ‘mint-ui‘;

Vue.component(Button.name, Button);

例子

改变颜色

<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>

改变大小

<mt-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>

禁用按钮

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

幽灵按钮

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

带图标

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

自定义图标

<mt-button>
  <img src="../assets/100x100.png" height="20" width="20" slot="icon">
  带自定义图标
</mt-button>

绑定 click 事件

<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>

API

参数	说明	类型	可选值	默认值
plain	幽灵按钮	Boolean		false
disabled	禁用状态	Boolean		false
type	按钮显示样式	String	default, primary, danger	default
size	尺寸	String	small, normal, large	normal
icon	图标	String	more, back

Slot

name	描述
-	显示的文本内容
icon	自定义显示的图标

Cell

单元格，可用作展示列表信息、链接或者表单等。

引入

import { Cell } from ‘mint-ui‘;

Vue.component(Cell.name, Cell);

例子

基础用法

<mt-cell title="标题文字"></mt-cell><mt-cell title="标题文字" value="说明文字"></mt-cell>

可点击的链接

<mt-cell
  title="标题文字"
  to="//github.com"
  is-link
  value="带链接"></mt-cell>

带图标

<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>

带自定义图标

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

自定义内容

<mt-cell title="标题文字" is-link>
  <span style="color: green">这里是元素</span></mt-cell>

带备注信息

<mt-cell title="标题" label="描述信息" is-link></mt-cell>

API

参数	说明	类型	可选值
icon	图标	String	back, more
title	标题	String
to	跳转链接	String
value	内容	*
label	备注信息，显示在标题下方	String
is-link	链接，会显示箭头图标。搭配 to 属性使用	Boolean

Slot

name	描述
-	自定义显示内容
title	自定义标题
icon	自定义图标

Cell Swipe

可滑动的单元格，用法同 cell。

引入

import { CellSwipe } from ‘mint-ui‘;

Vue.component(CellSwipe.name, CellSwipe);

例子

增加右滑动按钮

<mt-cell-swipe
  title="标题文字"
  :right="[
    {
      content: ‘Delete‘,
      style: { background: ‘red‘, color: ‘#fff‘ },
      handler: () => this.$messagebox(‘delete‘)
    }
  ]"></mt-cell-swipe>

content 可以是 HTML 或者纯文本。

API

参数	说明	类型	可选值
icon	图标	String	back, more
title	标题	String
to	跳转链接	String
value	内容	*
label	备注信息，显示在标题下方	String
is-link	链接，会显示箭头图标。搭配 to 属性使用	Boolean
left	按钮组, `{ content, style, handler }`	Object[]
right	按钮组, `{ content, style, handler }`	Object[]

Slot

name	描述
-	自定义显示内容
title	自定义标题
icon	自定义图标

Spinner

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

引入

import { Spinner } from ‘mint-ui‘;

Vue.component(Spinner.name, Spinner);

例子

指定类型

<mt-spinner type="snake"></mt-spinner><mt-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="fading-circle"></mt-spinner>

<!-- 或者接受传入类型的序号 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>

指定颜色

<mt-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="yellow"></mt-spinner>

指定尺寸

<mt-spinner :size="60"></mt-spinner>

API

参数	说明	类型	可选值	默认值
type	显示类型，提供四种风格，可以指定名称或者序号	String、Number	snake double-bounce triple-bounce fading-circle	snake
color	颜色，接受 hex、rgb 等颜色值	String		#ccc
size	尺寸，单位 px	Number		28

tab-container

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

引入

import { TabContainer, TabContainerItem } from ‘mint-ui‘;

Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

例子

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

<mt-tab-container v-model="active">
  <mt-tab-container-item id="tab-container1">
    <mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container2">
    <mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="tab-container3">
    <mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
  </mt-tab-container-item></mt-tab-container>

API

tab-container

参数	说明	类型	可选值	默认值
value	当前激活的 id	*
swipeable	显示滑动效果	Boolean		false

tab-container-item

参数	说明	类型	可选值	默认值
id	item 的 id	*

Slot

tab-container

name	描述
-	内容

tab-container-item

name	描述
-	内容

Search

搜索框，可显示搜索结果列表。

引入

import { Search } from ‘mint-ui‘;

Vue.component(Search.name, Search);

例子

基础用法

<mt-search v-model="value"></mt-search>

设置显示文字

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

带搜索结果

<mt-search v-model="value" :result.sync="result"></mt-search>

自定义搜索结果

<mt-search v-model="value">
  <mt-cell
    v-for="item in result"
    :title="item.title"
    :value="item.value">
  </mt-cell></mt-search>

API

参数	说明	类型	可选值	默认值
value	搜索结果绑定值	String
cancel-text	取消按钮文字	String		取消
placeholder	搜索框占位内容	String		搜索
result	搜索结果列表	Array
autofocus	自动聚焦	Boolean	-	false
show	始终显示搜索列表	Boolean	-	false

Slot

name	描述
-	自定义搜索结果列表

Switch

开关。

引入

import { Switch } from ‘mint-ui‘;

Vue.component(Switch.name, Switch);

例子

<mt-switch v-model="value"></mt-switch>

带显示内容

<mt-switch v-model="value">开关</mt-switch>

API

参数	说明	类型	可选值	默认值
value	绑定值	Boolean

Event

名称	返回值
change	checked: Boolean

Slot

name	描述
-	显示内容

Checklist

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

引入

import { Checklist } from ‘mint-ui‘;

Vue.component(Checklist.name, Checklist);

例子

基本用法

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

设置禁用选项

this.options = [
  {
    label: ‘被禁用‘,
    value: ‘值F‘,
    disabled: true
  },
  {
    label: ‘选中禁用‘,
    value: ‘选中禁用的值‘,
    disabled: true
  },
  {
    label: ‘选项A‘,
    value: ‘值A‘
  },
  {
    label: ‘选项B‘,
    value: ‘值B‘
  }
];

<mt-checklist
  v-model="value"
  :options="options"></mt-checklist>

设置最大可选数

<mt-checklist
  :max="2"
  v-model="value"
  :options="options"></mt-checklist>

选择框右对齐

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

API

参数	说明	类型	可选值	默认值
options	选择项，可直接传字符串数组或者对象数组	Array
value	绑定值	Array
title	标题，显示在列表上方	string
max	最多可选个数，超过后其他未选择的选项变成禁用状态	Number
align	复选框对其位置	String	left, right	left

Radio

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

引入

import { Radio } from ‘mint-ui‘;

Vue.component(Radio.name, Radio);

例子

基本用法

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

设置禁用选项

this.options = [
  {
    label: ‘被禁用‘,
    value: ‘值F‘,
    disabled: true
  },
  {
    label: ‘选项A‘,
    value: ‘值A‘
  },
  {
    label: ‘选项B‘,
    value: ‘值B‘
  }
];

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

单选框右对齐

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

API

参数	说明	类型	可选值	默认值
options	选择项	Array
value	绑定值	String
title	标题，显示在列表上方	string
align	单选框对其位置	String	left, right	left

Field

表单编辑器。

引入

import { Field } from ‘mint-ui‘;

Vue.component(Field.name, Field);

例子

基础用法

<mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field><mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field><mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field><mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field><mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field><mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>

设置校验状态

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

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

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

API

参数	说明	类型	可选值	默认值
type	输入框类型	String	text, number, email, url, tel, date, datetime, password, textarea	text
label	标签	String
value	绑定表单输入值	String
rows	类型为 textarea 时可指定高度（显示行数）	Number
placeholder	占位内容	String
disableClear	禁用 clear 按钮	Booean		false
readonly	readonly	Boolean		false
disabled	disabled	Boolean		false
state	校验状态	String	error, success, warning
attr	设置原生属性，例如 `:attr="{ maxlength: 10 }"`	Object

Slot

name	描述
-	显示的 HTML 内容

Badge

徽章，可指定颜色和尺寸。

引入

import { Badge } from ‘mint-ui‘;

Vue.component(Badge.name, Badge);

例子

指定尺寸

<mt-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>

指定类型

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

指定颜色

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

API

参数	说明	类型	可选值	默认值
type	显示类型	String	primary, error, success, warning	primary
color	自定义颜色值	String		type 的颜色
size	尺寸	String	normal, large, small	normal

Slot

name	描述
-	显示内容

vue mint ui 手册文档对于墙的恐惧

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > vue mint ui 手册文档对于墙的恐惧

vue mint ui 手册文档对于墙的恐惧

npm 安装

CDN

Hello world

快速上手

使用 vue-cli

引入 Mint UI

完整引入

按需引入

开始使用

Toast

引入

例子

API

引入

例子

自定义 HTML 模板

配置加载提示区域的文字

自动检测

API

Events

Slot

引入

例子

API

引入

例子

API

Action sheet

引入

例子

API

Popup

引入

例子

API

Slot

Swipe

引入

例子

API

Slot

mt-swipe

mt-swipe-item

Lazy load

引入

例子

Range

引入

例子

API

Slot

Progress

引入

例子

API

Slot

Picker

引入

例子

change 事件

slots

API

Slot

Datetime picker

引入

例子

API

Events

Index List

引入

例子

API

mt-index-list

mt-index-section

Slot

mt-index-list

mt-index-section

引入

`change` 事件

`slots`