vue mint ui 使用以及例子
npm 安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。npm i mint-ui -SCDN目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/
·
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-methodloading：组件已被释放，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
指
<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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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> 比如需要配置列表顶部的 HTML，则需要为自定义 HTML 模板的最外层标签设置 slot 属性为 top，类名为 mint-loadmore-top。当用户滑动组件时，组件会有以下几个状态：
pull：组件已经被按下，但按下的距离未达到topDistance，此时释放不会触发top-method，列表会回到初始位置drop：按下的距离不小于topDistance，此时释放会触发top-methodloading：组件已被释放，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
指
<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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| 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 | 描述 |
|---|---|
| - | 显示内容 |
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)