mint-ui使用手册
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
指
<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-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
指
<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 打包工具配合使用。
CDN目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
Hello world通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。
如果是通过 npm 安装,并希望配合 webpack 使用,请阅读下一节:快速上手。 关于事件绑定 在 Vue 2.0 中,为自定义组件绑定原生事件必须使用
从易用性的角度出发,我们对
但是对于其他组件,还是需要添加 快速上手本节将介绍如何在项目中使用 Mint UI。 使用 vue-cli
引入 Mint UI你可以引入整个 Mint UI,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。 完整引入在 main.js 中写入以下内容:
以上代码便完成了 Mint UI 的引入。需要注意的是,样式文件需要单独引入。 按需引入借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。 首先,安装 babel-plugin-component:
然后,将 .babelrc 修改为:
如果你只希望引入部分组件,比如 Button 和 Cell,那么需要在 main.js 中写入以下内容:
开始使用至此,一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕,现在就可以编写代码了。启动开发模式:
编译:
各个组件的使用方法请参阅它们各自的文档。 Toast
引入
例子基本用法
在调用
若需在文字上方显示一个 icon 图标,可以将图标的类名作为
执行
API
引入
例子
以列表顶部的下拉刷新为例:按住列表,下拉一定距离(通过
注意在这个方法的最后需要手动调用 列表底部的上拉刷新与之类似
唯一的区别是,当底部数据全部获取完毕时,可以将绑定到组件 手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过 自定义 HTML 模板可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板
比如需要配置列表顶部的 HTML,则需要为自定义 HTML 模板的最外层标签设置
配置加载提示区域的文字在不使用自定义 HTML 模板的情况下,可以配置 自动检测
API
Events
Slot
Infinite scroll
引入
例子为 HTML 元素添加
API
Message box
引入
例子以标题与内容字符串为参数进行调用
或者传入一个对象
此外,
在 prompt 中,若用户点击了取消按钮,则 Promise 的状态会变为 rejected API
Action sheet
引入
例子
将
API
Popup
引入
例子
将
若省略
API
Slot
Swipe
引入
例子基础用法
隐藏 indicators
取消自动播放
轮播图切换时会触发
API
Slotmt-swipe
mt-swipe-item
Lazy load
引入
例子为
若列表不在 window 上滚动,则需要将被滚动元素的 id 属性以修饰符的形式传递给 <div id="container"> <ul> <li v-for="item in list"> <img v-lazy.container="item"> </li> </ul></div> Range
引入
例子将一个本地变量与
更多的配置项
可在滑块两侧显示文字
API
Slot
Progress
引入
例子传入
可在进度条两侧显示文字
API
Slot
Picker
引入
例子传入
|
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-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
指
<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 | 描述 |
---|---|
- | 显示内容 |
mint-ui使用手册相关推荐
- Mint UI 使用指南
上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...
- 在基于nuxt的移动端页面中引用mint UI的popup组件之父子组件传值
最近在做移动端的wap页面,考虑到要做SEO,所以选定了nuxt+vue+mint ui. 有一个需求是这样的,点击头部菜单栏,出现一个气泡,点击返回首页. 由于一些页面没有统一引用mint的mt-h ...
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- 上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装 查看官网 (1)安装:npm ...
- vue 自定义键盘组件_vue 自定义 数字键盘+mint UI MessageBox的应用
功能: 实现自定义数字键盘,输入数字超过两位时不可输入 点击清空清空输入框内的值 提交时弹出提示框,并显示所输入的数字用--mint UI实现 效果图: 9. //将变量numberval赋给valu ...
- VUE—下载安装并使用mint ui(图文详情)
VUE-下载安装并使用mint ui 第一步:输入指令 mac在前面加上sudo cnpm i mint-ui -S 第二步:在main.js输入 import MintUI from 'mint-u ...
- 【Vue学习总结】22.使用Mint UI的infinite-scroll实现上拉分页加载
接上篇<21.Vue-UI框架之Mint UI的使用> 上一篇我们讲解了Vue的UI框架Mint UI的使用,本篇我们来通过Mint UI提供的infinite-scroll组件结合api ...
- Mint UI—loadmore—Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片(图文)
Mint UI-loadmore-Pull down下拉刷新将下拉刷新的箭头标志更换成其他图片 <div slot="top" class="mint-loadmo ...
- Mint UI组件教程
官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 前面两节说到,从搭建环境,引入Min ...
最新文章
- AI创业周报:元宇宙时代来临!环球墨非风头正盛,53岁女博士领现象级芯片公司获数亿元融资...
- 【算法与数据结构】一道检测inversion count的初级算法
- PaaS平台应用的12要素原则
- 语言 双线性内插_合资插混间的实力较量,微蓝6 PHEV和卡罗拉双擎E+谁更值得选...
- vs2008 c++ 调用java
- 5月9日 python学习总结 外键、表之间的关联关系、修改表、清空表内容、复制表...
- mybatis-plus中 queryWrapper查询对象常见方法
- HTML+CSS+JS实现 ❤️h5酷炫的天体木星动画特效❤️
- 随笔 - Andriod
- OpenShift 4 Tekton - Tekton实现包含Gogs+SonaQube+Nexus+Report+WebHook的Pipeline
- sci的figure怎么做_一文看懂SCI论文中都有哪几种Figure
- MusicXML文档翻译(持续更新)
- Android内存管理优化建议
- 快速搞明白公网和私网的区别(组建私网的网络号)
- 【Python数据挖掘课程】一.安装Python及爬虫入门介绍
- 科普书籍有哪些,推荐你读这8本
- 持之以恒,日益见长——计算机拐族人士
- 短视频运营:如何做自媒体?新手入门的详细操作分享
- 移动互联网悄然发生的十大变化,你必须知道
- 用JS实现人脑和计算机交互,这个是真的牛!
热门文章
- 类脑计算机能解决,全球神经元规模最大类脑计算机问世
- 25行代码带你爬取4399小游戏数据,看下童年的游戏是否还在
- 微信小程序开发(三):分包加载
- 【札记】三 周易以及六爻蓍(shi)草起卦自学
- Easy EDA #学习笔记02# |Arduino UNO 单片机最小系统PCB原理图 (ATMEGA328P单片机 AMS1117芯片5V转3.3V )
- zz十年学会程序设计
- 金蝶ERP系统的实施对企业的重要性
- 如何从小白成为自动化软件测试工程师?
- 8年程序猿告诉你程序员能赚大钱么?
- 大学生闲置物品交易平台UML建模