vue mint ui 使用以及例子
来源:互联网 发布:众人皆知的意思 编辑:程序博客网 时间:2024/05/16 06:01
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-clivue 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
'bottom'
'middle''middle'duration持续时间(毫秒),若为 -1 则不会自动关闭Number 3000classNameToast 的类名。可以为其添加样式String iconClassicon 图标的类名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
loadmore
会自动检测并撑满其容器Boolean truedistanceIndex手指移动与组件移动距离的比值Number 2maxDistance组件可移动的最大距离(像素),若为 0 则不限制Number 0topPullTexttopStatus
为 pull
时加载提示区域的文字String '下拉刷新'topDropTexttopStatus
为 drop
时加载提示区域的文字String '释放更新'topLoadingTexttopStatus
为 loading
时加载提示区域的文字String '加载中...'topDistance触发 topMethod
的下拉距离阈值(像素)Number 70topMethod下拉刷新执行的方法Function bottomPullTextbottomStatus
为 pull
时加载提示区域的文字String '上拉刷新'bottomDropTextbottomStatus
为 drop
时加载提示区域的文字String '释放更新'bottomLoadingTextbottomStatus
为 loading
时加载提示区域的文字String '加载中...'bottomDistance触发 bottomMethod
的上拉距离阈值(像素)Number 70bottomMethod上拉刷新执行的方法Function bottomAllLoaded若为真,则 bottomMethod
不会被再次触发Boolean falseEvents
Slot
无限滚动指令。
引入
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
弹出式提示框,有多种交互形式。
引入
import { MessageBox } from 'mint-ui';
例子
以标题与内容字符串为参数进行调用
MessageBox('提示', '操作成功');
或者传入一个对象
MessageBox({ title: '提示', message: '确定执行此操作?', showCancelButton: true});
此外,MessageBox
还提供了 alert
、confirm
和 prompt
三个方法,它们都返回一个 Promise
MessageBox.alert(message, title);
MessageBox.alert('操作成功').then(action => { ...});
MessageBox.confirm(message, title);
MessageBox.confirm('确定执行此操作?').then(action => { ...});
MessageBox.prompt(message, title);
MessageBox.prompt('请输入姓名').then(({ value, action }) => { ...});
在 prompt 中,若用户点击了取消按钮,则 Promise 的状态会变为 rejected
API
Action sheet
操作表,从屏幕下方移入。
引入
import { Actionsheet } from 'mint-ui';Vue.component(Actionsheet.name, Actionsheet);
例子
actions
属性绑定一个由对象组成的数组,每个对象有 name
和 method
两个键,name
为菜单项的文本,method
为点击该菜单项的回调函数。
将 v-model
绑定到一个本地变量,通过操作这个变量即可控制 actionsheet
的显示与隐藏。
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
API
actionsheet
Boolean truePopup
弹出框,可自定义内容。
引入
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
popup
的位置。省略则居中显示String'top''right'
'bottom'
'left' pop-transition显示/隐藏时的动效,仅在省略
position
时可配置String'popup-fade' modal是否创建一个 modal 层Boolean truecloseOnClickModal是否可以通过点击 modal 层来关闭 popup
Boolean trueSlot
Swipe
轮播图,可自定义轮播时间间隔、动画时长等。
引入
import { Swipe, SwipeItem } from 'mint-ui';Vue.component(Swipe.name, Swipe);Vue.component(SwipeItem.name, SwipeItem);
例子
基础用法
<mt-swipe :auto="4000"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
隐藏 indicators
<mt-swipe :show-indicators="false"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
取消自动播放
<mt-swipe :auto="0"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
change
事件
轮播图切换时会触发 change
事件,参数为切入轮播图的索引
<mt-swipe @change="handleChange"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
methods: { handleChange(index) { ... }}
API
Slot
mt-swipe
mt-swipe-item
组件mt-swipe-item
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;
}
v-lazy
指Range
滑块,支持自定义步长、区间等。
引入
import { Range } from 'mint-ui';Vue.component(Range.name, Range);
例子
将一个本地变量与 range
的 value
属性同步即可实现双向绑定
<mt-range v-model="rangeValue"></mt-range>
更多的配置项
<mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5"></mt-range>
可在滑块两侧显示文字
<mt-range v-model="rangeValue"> <div slot="start">0</div> <div slot="end">100</div></mt-range>
API
Slot
Progress
进度条。
引入
import { Progress } from 'mint-ui';Vue.component(Progress.name, Progress);
例子
传入 value
作为进度条的值。可自定义它的线宽
<mt-progress :value="20" :bar-height="5"></mt-progress>
可在进度条两侧显示文字
<mt-progress :value="60"> <div slot="start">0%</div> <div slot="end">100%</div></mt-progress>
API
Slot
Picker
选择器,支持多 slot 联动。
引入
import { Picker } from 'mint-ui';Vue.component(Picker.name, Picker);
例子
传入 slots
,当被选中的值发生变化时触发 change
事件。change
事件有两个参数,分别为当前 picker
的 vue 实例和各 slot 被选中的值组成的数组
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
export default { methods: { onValuesChange(picker, values) { if (values[0] > values[1]) { picker.setSlotValue(1, values[0]); } } }, data() { return { slots: [ { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot1', textAlign: 'right' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot3', textAlign: 'left' } ] }; }};
change
事件
在 change
事件中,可以使用注册到 picker
实例上的一些方法:
- getSlotValue(index):获取给定 slot 目前被选中的值
- setSlotValue(index, value):设定给定 slot 被选中的值,该值必须存在于该 slot 的备选值数组中
- getSlotValues(index):获取给定 slot 的备选值数组
- setSlotValues(index, values):设定给定 slot 的备选值数组
- getValues():获取所有 slot 目前被选中的值(分隔符 slot 除外)
- setValues(values):设定所有 slot 被选中的值(分隔符 slot 除外),该值必须存在于对应 slot 的备选值数组中
slots
绑定到 slots
属性的数组由对象组成,每个对象都对应一个 slot,它们有如下键名
mt-picker
标签上设置 value-key
属性来指定显示的字段名defaultIndex对应 slot 初始选中值,需传入其在 values 数组中的序号,默认为 0textAlign对应 slot 的对齐方式flex对应 slot CSS 的 flex 值className对应 slot 的类名API
Slot
Datetime picker
日期时间选择器,支持自定义类型。
引入
import { DatetimePicker } from 'mint-ui';Vue.component(DatetimePicker.name, DatetimePicker);
例子
v-model
属性为组件的绑定值。
type
属性表示 datetime-picker
组件的类型,它有三个可能的值:
datetime
: 日期时间选择器,可选择年、月、日、时、分,value
值为一个Date
对象date
: 日期选择器,可选择年、月、日,value
值为一个Date
对象time
: 时间选择器,可选择时、分,value
值为一个格式为HH:mm
的字符串
datetime-picker
提供了两个供外部调用的方法:open
和 close
,分别用于打开和关闭选择器。
<template> <mt-datetime-picker ref="picker" type="time" v-model="pickerValue"> </mt-datetime-picker></template><script> export default { methods: { openPicker() { this.$refs.picker.open(); } } };</script>
可以为选项提供自定义模板。模板须为一个包含了 {value}
的字符串,{value}
会被解析为相应选项的值。
<mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>
当点击确认按钮时会触发 confirm
事件,参数为当前 value 的值。
<mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm"></mt-datetime-picker>
API
Events
Index List
索引列表,可由右侧索引导航快速定位到相应的内容。
引入
import { IndexList, IndexSection } from 'mint-ui';Vue.component(IndexList.name, IndexList);Vue.component(IndexSection.name, IndexSection);
例子
<mt-index-list> <mt-index-section index="A"> <mt-cell title="Aaron"></mt-cell> <mt-cell title="Alden"></mt-cell> <mt-cell title="Austin"></mt-cell> </mt-index-section> <mt-index-section index="B"> <mt-cell title="Baldwin"></mt-cell> <mt-cell title="Braden"></mt-cell> </mt-index-section> ... <mt-index-section index="Z"> <mt-cell title="Zack"></mt-cell> <mt-cell title="Zane"></mt-cell> </mt-index-section></mt-index-list>
mt-index-section
与右侧导航中的索引一一对应,mt-index-section
的 index
属性即为与其对应的索引的显示文本。mt-index-section
标签内可为任意自定义内容。
当手指在右侧导航中滑动时,会在列表中间显示一个目前索引值的提示符。若不需要提示符,只需将 show-indicator
设为 false
<mt-index-list :show-indicator="false"> ...</mt-index-list>
API
mt-index-list
mt-index-section
Slot
mt-index-list
mt-index-section
组件mt-index-section
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>
选项
方法
事件
Header
顶部导航栏,支持显示按钮、自定义文字和固定在顶部。
引入
import { Header } from 'mint-ui';Vue.component(Header.name, Header);
例子
固定在页面顶部
<mt-header fixed title="固定在顶部"></mt-header>
设置 left
或 right
slot
<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈"> <router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button> </router-link> <mt-button icon="more" slot="right"></mt-button></mt-header>
设置多个按钮
<mt-header title="多个按钮"> <router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button> <mt-button @click="handleClose">关闭</mt-button> </router-link> <mt-button icon="more" slot="right"></mt-button></mt-header>
API
Slot
Tabbar
底部选项卡,点击 tab 会切换显示的页面。依赖 tab-item 组件。
引入
import { Tabbar, TabItem } from 'mint-ui';Vue.component(Tabbar.name, Tabbar);Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 组件使用
<mt-tabbar v-model="selected"> <mt-tab-item id="外卖"> <img slot="icon" src="../assets/100x100.png"> 外卖 </mt-tab-item> <mt-tab-item id="订单"> <img slot="icon" src="../assets/100x100.png"> 订单 </mt-tab-item> <mt-tab-item id="发现"> <img slot="icon" src="../assets/100x100.png"> 发现 </mt-tab-item> <mt-tab-item id="我的"> <img slot="icon" src="../assets/100x100.png"> 我的 </mt-tab-item></mt-tabbar>
API
tabbar
tab-item
Slot
tabbar
tab-item
Navbar
顶部选项卡,与 Tabbar 类似,依赖 tab-item 组件。
引入
import { Navbar, TabItem } from 'mint-ui';Vue.component(Navbar.name, Navbar);Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 组件使用
<mt-navbar v-model="selected"> <mt-tab-item id="1">选项一</mt-tab-item> <mt-tab-item id="2">选项二</mt-tab-item> <mt-tab-item id="3">选项三</mt-tab-item></mt-navbar><!-- 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
tab-item
Slot
navbar
tab-item
Button
按钮,提供几种基础样式和尺寸,可自定义图标。
引入
import { Button } from 'mint-ui';Vue.component(Button.name, Button);
例子
改变颜色
<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>
改变大小
<mt-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>
禁用按钮
<mt-button disabled>disabled</mt-button>
幽灵按钮
<mt-button plain>plain</mt-button>
带图标
<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>
自定义图标
<mt-button> <img src="../assets/100x100.png" height="20" width="20" slot="icon"> 带自定义图标</mt-button>
绑定 click 事件
<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>
API
Slot
Cell
单元格,可用作展示列表信息、链接或者表单等。
引入
import { Cell } from 'mint-ui';Vue.component(Cell.name, Cell);
例子
基础用法
<mt-cell title="标题文字"></mt-cell><mt-cell title="标题文字" value="说明文字"></mt-cell>
可点击的链接
<mt-cell title="标题文字" to="//github.com" is-link value="带链接"></mt-cell>
带图标
<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>
带自定义图标
<mt-cell title="标题文字"> <span>icon 是图片</span> <img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>
自定义内容
<mt-cell title="标题文字" is-link> <span style="color: green">这里是元素</span></mt-cell>
带备注信息
<mt-cell title="标题" label="描述信息" is-link></mt-cell>
API
Slot
Cell Swipe
可滑动的单元格,用法同 cell。
引入
import { CellSwipe } from 'mint-ui';Vue.component(CellSwipe.name, CellSwipe);
例子
增加右滑动按钮
<mt-cell-swipe title="标题文字" :right="[ { content: 'Delete', style: { background: 'red', color: '#fff' }, handler: () => this.$messagebox('delete') } ]"></mt-cell-swipe>
content
可以是 HTML 或者纯文本。
API
{ content, style, handler }
Object[] right按钮组, { content, style, handler }
Object[] Slot
Spinner
加载动画,可指定显示类型、尺寸和颜色。
引入
import { Spinner } from 'mint-ui';Vue.component(Spinner.name, Spinner);
例子
指定类型
<mt-spinner type="snake"></mt-spinner><mt-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="fading-circle"></mt-spinner><!-- 或者接受传入类型的序号 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>
指定颜色
<mt-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="yellow"></mt-spinner>
指定尺寸
<mt-spinner :size="60"></mt-spinner>
API
double-bounce
triple-bounce
fading-circlesnakecolor颜色,接受 hex、rgb 等颜色值String #cccsize尺寸,单位 pxNumber 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
tab-container-item
Slot
tab-container
tab-container-item
Search
搜索框,可显示搜索结果列表。
引入
import { Search } from 'mint-ui';Vue.component(Search.name, Search);
例子
基础用法
<mt-search v-model="value"></mt-search>
设置显示文字
<mt-search v-model="value" cancel-text="取消" placeholder="搜索"></mt-search>
带搜索结果
<mt-search v-model="value" :result.sync="result"></mt-search>
自定义搜索结果
<mt-search v-model="value"> <mt-cell v-for="item in result" :title="item.title" :value="item.value"> </mt-cell></mt-search>
API
Slot
Switch
开关。
引入
import { Switch } from 'mint-ui';Vue.component(Switch.name, Switch);
例子
<mt-switch v-model="value"></mt-switch>
带显示内容
<mt-switch v-model="value">开关</mt-switch>
API
Event
Slot
Checklist
复选框列表,依赖 cell 组件。
引入
import { Checklist } from 'mint-ui';Vue.component(Checklist.name, Checklist);
例子
基本用法
<mt-checklist title="复选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-checklist>
设置禁用选项
this.options = [ { label: '被禁用', value: '值F', disabled: true }, { label: '选中禁用', value: '选中禁用的值', disabled: true }, { label: '选项A', value: '值A' }, { label: '选项B', value: '值B' }];
<mt-checklist v-model="value" :options="options"></mt-checklist>
设置最大可选数
<mt-checklist :max="2" v-model="value" :options="options"></mt-checklist>
选择框右对齐
<mt-checklist align="right" title="右对齐" v-model="value" :options="options"></mt-checklist>
API
Radio
单选框列表,依赖 cell 组件。
引入
import { Radio } from 'mint-ui';Vue.component(Radio.name, Radio);
例子
基本用法
<mt-radio title="单选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-radio>
设置禁用选项
this.options = [ { label: '被禁用', value: '值F', disabled: true }, { label: '选项A', value: '值A' }, { label: '选项B', value: '值B' }];
<mt-radio title="单选框列表" v-model="value" :options="options"></mt-radio>
单选框右对齐
<mt-radio align="right" title="右对齐" v-model="value" :options="options"></mt-radio>
API
Field
表单编辑器。
引入
import { Field } from 'mint-ui';Vue.component(Field.name, Field);
例子
基础用法
<mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field><mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field><mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field><mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field><mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field><mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>
设置校验状态
<mt-field label="邮箱" state="success" v-model="email"></mt-field><mt-field label="邮箱" state="error" v-model="email"></mt-field><mt-field label="邮箱" state="warning" v-model="email"></mt-field>
自定义内容(例如添加验证码)
<mt-field label="验证码" v-model="captcha"> <img src="../assets/100x100.png" height="45px" width="100px"></mt-field>
API
:attr="{ maxlength: 10 }"
Object Slot
Badge
徽章,可指定颜色和尺寸。
引入
import { Badge } from 'mint-ui';Vue.component(Badge.name, Badge);
例子
指定尺寸
<mt-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>
指定类型
<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>
指定颜色
<mt-badge size="small" color="#888">自定义颜色</mt-badge>
API
Slot
npm 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i mint-ui -S
CDN
目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 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-clivue 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
'bottom'
'middle''middle'duration持续时间(毫秒),若为 -1 则不会自动关闭Number 3000classNameToast 的类名。可以为其添加样式String iconClassicon 图标的类名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
loadmore
会自动检测并撑满其容器Boolean truedistanceIndex手指移动与组件移动距离的比值Number 2maxDistance组件可移动的最大距离(像素),若为 0 则不限制Number 0topPullTexttopStatus
为 pull
时加载提示区域的文字String '下拉刷新'topDropTexttopStatus
为 drop
时加载提示区域的文字String '释放更新'topLoadingTexttopStatus
为 loading
时加载提示区域的文字String '加载中...'topDistance触发 topMethod
的下拉距离阈值(像素)Number 70topMethod下拉刷新执行的方法Function bottomPullTextbottomStatus
为 pull
时加载提示区域的文字String '上拉刷新'bottomDropTextbottomStatus
为 drop
时加载提示区域的文字String '释放更新'bottomLoadingTextbottomStatus
为 loading
时加载提示区域的文字String '加载中...'bottomDistance触发 bottomMethod
的上拉距离阈值(像素)Number 70bottomMethod上拉刷新执行的方法Function bottomAllLoaded若为真,则 bottomMethod
不会被再次触发Boolean falseEvents
Slot
无限滚动指令。
引入
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
弹出式提示框,有多种交互形式。
引入
import { MessageBox } from 'mint-ui';
例子
以标题与内容字符串为参数进行调用
MessageBox('提示', '操作成功');
或者传入一个对象
MessageBox({ title: '提示', message: '确定执行此操作?', showCancelButton: true});
此外,MessageBox
还提供了 alert
、confirm
和 prompt
三个方法,它们都返回一个 Promise
MessageBox.alert(message, title);
MessageBox.alert('操作成功').then(action => { ...});
MessageBox.confirm(message, title);
MessageBox.confirm('确定执行此操作?').then(action => { ...});
MessageBox.prompt(message, title);
MessageBox.prompt('请输入姓名').then(({ value, action }) => { ...});
在 prompt 中,若用户点击了取消按钮,则 Promise 的状态会变为 rejected
API
Action sheet
操作表,从屏幕下方移入。
引入
import { Actionsheet } from 'mint-ui';Vue.component(Actionsheet.name, Actionsheet);
例子
actions
属性绑定一个由对象组成的数组,每个对象有 name
和 method
两个键,name
为菜单项的文本,method
为点击该菜单项的回调函数。
将 v-model
绑定到一个本地变量,通过操作这个变量即可控制 actionsheet
的显示与隐藏。
<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>
API
actionsheet
Boolean truePopup
弹出框,可自定义内容。
引入
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
popup
的位置。省略则居中显示String'top''right'
'bottom'
'left' pop-transition显示/隐藏时的动效,仅在省略
position
时可配置String'popup-fade' modal是否创建一个 modal 层Boolean truecloseOnClickModal是否可以通过点击 modal 层来关闭 popup
Boolean trueSlot
Swipe
轮播图,可自定义轮播时间间隔、动画时长等。
引入
import { Swipe, SwipeItem } from 'mint-ui';Vue.component(Swipe.name, Swipe);Vue.component(SwipeItem.name, SwipeItem);
例子
基础用法
<mt-swipe :auto="4000"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
隐藏 indicators
<mt-swipe :show-indicators="false"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
取消自动播放
<mt-swipe :auto="0"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
change
事件
轮播图切换时会触发 change
事件,参数为切入轮播图的索引
<mt-swipe @change="handleChange"> <mt-swipe-item>1</mt-swipe-item> <mt-swipe-item>2</mt-swipe-item> <mt-swipe-item>3</mt-swipe-item></mt-swipe>
methods: { handleChange(index) { ... }}
API
Slot
mt-swipe
mt-swipe-item
组件mt-swipe-item
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;
}
v-lazy
指Range
滑块,支持自定义步长、区间等。
引入
import { Range } from 'mint-ui';Vue.component(Range.name, Range);
例子
将一个本地变量与 range
的 value
属性同步即可实现双向绑定
<mt-range v-model="rangeValue"></mt-range>
更多的配置项
<mt-range v-model="rangeValue" :min="10" :max="90" :step="10" :bar-height="5"></mt-range>
可在滑块两侧显示文字
<mt-range v-model="rangeValue"> <div slot="start">0</div> <div slot="end">100</div></mt-range>
API
Slot
Progress
进度条。
引入
import { Progress } from 'mint-ui';Vue.component(Progress.name, Progress);
例子
传入 value
作为进度条的值。可自定义它的线宽
<mt-progress :value="20" :bar-height="5"></mt-progress>
可在进度条两侧显示文字
<mt-progress :value="60"> <div slot="start">0%</div> <div slot="end">100%</div></mt-progress>
API
Slot
Picker
选择器,支持多 slot 联动。
引入
import { Picker } from 'mint-ui';Vue.component(Picker.name, Picker);
例子
传入 slots
,当被选中的值发生变化时触发 change
事件。change
事件有两个参数,分别为当前 picker
的 vue 实例和各 slot 被选中的值组成的数组
<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
export default { methods: { onValuesChange(picker, values) { if (values[0] > values[1]) { picker.setSlotValue(1, values[0]); } } }, data() { return { slots: [ { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot1', textAlign: 'right' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'], className: 'slot3', textAlign: 'left' } ] }; }};
change
事件
在 change
事件中,可以使用注册到 picker
实例上的一些方法:
- getSlotValue(index):获取给定 slot 目前被选中的值
- setSlotValue(index, value):设定给定 slot 被选中的值,该值必须存在于该 slot 的备选值数组中
- getSlotValues(index):获取给定 slot 的备选值数组
- setSlotValues(index, values):设定给定 slot 的备选值数组
- getValues():获取所有 slot 目前被选中的值(分隔符 slot 除外)
- setValues(values):设定所有 slot 被选中的值(分隔符 slot 除外),该值必须存在于对应 slot 的备选值数组中
slots
绑定到 slots
属性的数组由对象组成,每个对象都对应一个 slot,它们有如下键名
mt-picker
标签上设置 value-key
属性来指定显示的字段名defaultIndex对应 slot 初始选中值,需传入其在 values 数组中的序号,默认为 0textAlign对应 slot 的对齐方式flex对应 slot CSS 的 flex 值className对应 slot 的类名API
Slot
Datetime picker
日期时间选择器,支持自定义类型。
引入
import { DatetimePicker } from 'mint-ui';Vue.component(DatetimePicker.name, DatetimePicker);
例子
v-model
属性为组件的绑定值。
type
属性表示 datetime-picker
组件的类型,它有三个可能的值:
datetime
: 日期时间选择器,可选择年、月、日、时、分,value
值为一个Date
对象date
: 日期选择器,可选择年、月、日,value
值为一个Date
对象time
: 时间选择器,可选择时、分,value
值为一个格式为HH:mm
的字符串
datetime-picker
提供了两个供外部调用的方法:open
和 close
,分别用于打开和关闭选择器。
<template> <mt-datetime-picker ref="picker" type="time" v-model="pickerValue"> </mt-datetime-picker></template><script> export default { methods: { openPicker() { this.$refs.picker.open(); } } };</script>
可以为选项提供自定义模板。模板须为一个包含了 {value}
的字符串,{value}
会被解析为相应选项的值。
<mt-datetime-picker v-model="pickerVisible" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>
当点击确认按钮时会触发 confirm
事件,参数为当前 value 的值。
<mt-datetime-picker v-model="pickerVisible" type="time" @confirm="handleConfirm"></mt-datetime-picker>
API
Events
Index List
索引列表,可由右侧索引导航快速定位到相应的内容。
引入
import { IndexList, IndexSection } from 'mint-ui';Vue.component(IndexList.name, IndexList);Vue.component(IndexSection.name, IndexSection);
例子
<mt-index-list> <mt-index-section index="A"> <mt-cell title="Aaron"></mt-cell> <mt-cell title="Alden"></mt-cell> <mt-cell title="Austin"></mt-cell> </mt-index-section> <mt-index-section index="B"> <mt-cell title="Baldwin"></mt-cell> <mt-cell title="Braden"></mt-cell> </mt-index-section> ... <mt-index-section index="Z"> <mt-cell title="Zack"></mt-cell> <mt-cell title="Zane"></mt-cell> </mt-index-section></mt-index-list>
mt-index-section
与右侧导航中的索引一一对应,mt-index-section
的 index
属性即为与其对应的索引的显示文本。mt-index-section
标签内可为任意自定义内容。
当手指在右侧导航中滑动时,会在列表中间显示一个目前索引值的提示符。若不需要提示符,只需将 show-indicator
设为 false
<mt-index-list :show-indicator="false"> ...</mt-index-list>
API
mt-index-list
mt-index-section
Slot
mt-index-list
mt-index-section
组件mt-index-section
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>
选项
方法
事件
Header
顶部导航栏,支持显示按钮、自定义文字和固定在顶部。
引入
import { Header } from 'mint-ui';Vue.component(Header.name, Header);
例子
固定在页面顶部
<mt-header fixed title="固定在顶部"></mt-header>
设置 left
或 right
slot
<mt-header title="标题过长会隐藏后面的内容啊哈哈哈哈"> <router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button> </router-link> <mt-button icon="more" slot="right"></mt-button></mt-header>
设置多个按钮
<mt-header title="多个按钮"> <router-link to="/" slot="left"> <mt-button icon="back">返回</mt-button> <mt-button @click="handleClose">关闭</mt-button> </router-link> <mt-button icon="more" slot="right"></mt-button></mt-header>
API
Slot
Tabbar
底部选项卡,点击 tab 会切换显示的页面。依赖 tab-item 组件。
引入
import { Tabbar, TabItem } from 'mint-ui';Vue.component(Tabbar.name, Tabbar);Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 组件使用
<mt-tabbar v-model="selected"> <mt-tab-item id="外卖"> <img slot="icon" src="../assets/100x100.png"> 外卖 </mt-tab-item> <mt-tab-item id="订单"> <img slot="icon" src="../assets/100x100.png"> 订单 </mt-tab-item> <mt-tab-item id="发现"> <img slot="icon" src="../assets/100x100.png"> 发现 </mt-tab-item> <mt-tab-item id="我的"> <img slot="icon" src="../assets/100x100.png"> 我的 </mt-tab-item></mt-tabbar>
API
tabbar
tab-item
Slot
tabbar
tab-item
Navbar
顶部选项卡,与 Tabbar 类似,依赖 tab-item 组件。
引入
import { Navbar, TabItem } from 'mint-ui';Vue.component(Navbar.name, Navbar);Vue.component(TabItem.name, TabItem);
例子
搭配 tab-container 组件使用
<mt-navbar v-model="selected"> <mt-tab-item id="1">选项一</mt-tab-item> <mt-tab-item id="2">选项二</mt-tab-item> <mt-tab-item id="3">选项三</mt-tab-item></mt-navbar><!-- 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
tab-item
Slot
navbar
tab-item
Button
按钮,提供几种基础样式和尺寸,可自定义图标。
引入
import { Button } from 'mint-ui';Vue.component(Button.name, Button);
例子
改变颜色
<mt-button type="default">default</mt-button><mt-button type="primary">primary</mt-button><mt-button type="danger">danger</mt-button>
改变大小
<mt-button size="small">small</mt-button><mt-button size="large">large</mt-button><mt-button size="normal">normal</mt-button>
禁用按钮
<mt-button disabled>disabled</mt-button>
幽灵按钮
<mt-button plain>plain</mt-button>
带图标
<mt-button icon="back">back</mt-button><mt-button icon="more">更多</mt-button>
自定义图标
<mt-button> <img src="../assets/100x100.png" height="20" width="20" slot="icon"> 带自定义图标</mt-button>
绑定 click 事件
<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>
API
Slot
Cell
单元格,可用作展示列表信息、链接或者表单等。
引入
import { Cell } from 'mint-ui';Vue.component(Cell.name, Cell);
例子
基础用法
<mt-cell title="标题文字"></mt-cell><mt-cell title="标题文字" value="说明文字"></mt-cell>
可点击的链接
<mt-cell title="标题文字" to="//github.com" is-link value="带链接"></mt-cell>
带图标
<mt-cell title="标题文字" icon="more" value="带 icon"></mt-cell>
带自定义图标
<mt-cell title="标题文字"> <span>icon 是图片</span> <img slot="icon" src="../assets/100x100.png" width="24" height="24"></mt-cell>
自定义内容
<mt-cell title="标题文字" is-link> <span style="color: green">这里是元素</span></mt-cell>
带备注信息
<mt-cell title="标题" label="描述信息" is-link></mt-cell>
API
Slot
Cell Swipe
可滑动的单元格,用法同 cell。
引入
import { CellSwipe } from 'mint-ui';Vue.component(CellSwipe.name, CellSwipe);
例子
增加右滑动按钮
<mt-cell-swipe title="标题文字" :right="[ { content: 'Delete', style: { background: 'red', color: '#fff' }, handler: () => this.$messagebox('delete') } ]"></mt-cell-swipe>
content
可以是 HTML 或者纯文本。
API
{ content, style, handler }
Object[] right按钮组, { content, style, handler }
Object[] Slot
Spinner
加载动画,可指定显示类型、尺寸和颜色。
引入
import { Spinner } from 'mint-ui';Vue.component(Spinner.name, Spinner);
例子
指定类型
<mt-spinner type="snake"></mt-spinner><mt-spinner type="double-bounce"></mt-spinner><mt-spinner type="triple-bounce"></mt-spinner><mt-spinner type="fading-circle"></mt-spinner><!-- 或者接受传入类型的序号 --><mt-spinner :type="0"></mt-spinner><mt-spinner :type="1"></mt-spinner><mt-spinner :type="2"></mt-spinner><mt-spinner :type="3"></mt-spinner>
指定颜色
<mt-spinner color="#26a2ff"></mt-spinner><mt-spinner color="rgb(100, 100, 100)"></mt-spinner><mt-spinner color="yellow"></mt-spinner>
指定尺寸
<mt-spinner :size="60"></mt-spinner>
API
double-bounce
triple-bounce
fading-circlesnakecolor颜色,接受 hex、rgb 等颜色值String #cccsize尺寸,单位 pxNumber 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
tab-container-item
Slot
tab-container
tab-container-item
Search
搜索框,可显示搜索结果列表。
引入
import { Search } from 'mint-ui';Vue.component(Search.name, Search);
例子
基础用法
<mt-search v-model="value"></mt-search>
设置显示文字
<mt-search v-model="value" cancel-text="取消" placeholder="搜索"></mt-search>
带搜索结果
<mt-search v-model="value" :result.sync="result"></mt-search>
自定义搜索结果
<mt-search v-model="value"> <mt-cell v-for="item in result" :title="item.title" :value="item.value"> </mt-cell></mt-search>
API
Slot
Switch
开关。
引入
import { Switch } from 'mint-ui';Vue.component(Switch.name, Switch);
例子
<mt-switch v-model="value"></mt-switch>
带显示内容
<mt-switch v-model="value">开关</mt-switch>
API
Event
Slot
Checklist
复选框列表,依赖 cell 组件。
引入
import { Checklist } from 'mint-ui';Vue.component(Checklist.name, Checklist);
例子
基本用法
<mt-checklist title="复选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-checklist>
设置禁用选项
this.options = [ { label: '被禁用', value: '值F', disabled: true }, { label: '选中禁用', value: '选中禁用的值', disabled: true }, { label: '选项A', value: '值A' }, { label: '选项B', value: '值B' }];
<mt-checklist v-model="value" :options="options"></mt-checklist>
设置最大可选数
<mt-checklist :max="2" v-model="value" :options="options"></mt-checklist>
选择框右对齐
<mt-checklist align="right" title="右对齐" v-model="value" :options="options"></mt-checklist>
API
Radio
单选框列表,依赖 cell 组件。
引入
import { Radio } from 'mint-ui';Vue.component(Radio.name, Radio);
例子
基本用法
<mt-radio title="单选框列表" v-model="value" :options="['选项A', '选项B', '选项C']"></mt-radio>
设置禁用选项
this.options = [ { label: '被禁用', value: '值F', disabled: true }, { label: '选项A', value: '值A' }, { label: '选项B', value: '值B' }];
<mt-radio title="单选框列表" v-model="value" :options="options"></mt-radio>
单选框右对齐
<mt-radio align="right" title="右对齐" v-model="value" :options="options"></mt-radio>
API
Field
表单编辑器。
引入
import { Field } from 'mint-ui';Vue.component(Field.name, Field);
例子
基础用法
<mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field><mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="email"></mt-field><mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field><mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field><mt-field label="网站" placeholder="请输入网址" type="url" v-model="website"></mt-field><mt-field label="数字" placeholder="请输入数字" type="number" v-model="number"></mt-field><mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field><mt-field label="自我介绍" placeholder="自我介绍" type="textarea" rows="4" v-modal="introduction"></mt-field>
设置校验状态
<mt-field label="邮箱" state="success" v-model="email"></mt-field><mt-field label="邮箱" state="error" v-model="email"></mt-field><mt-field label="邮箱" state="warning" v-model="email"></mt-field>
自定义内容(例如添加验证码)
<mt-field label="验证码" v-model="captcha"> <img src="../assets/100x100.png" height="45px" width="100px"></mt-field>
API
:attr="{ maxlength: 10 }"
Object Slot
Badge
徽章,可指定颜色和尺寸。
引入
import { Badge } from 'mint-ui';Vue.component(Badge.name, Badge);
例子
指定尺寸
<mt-badge size="small">30</mt-badge><mt-badge size="normal">10</mt-badge><mt-badge size="large">10</mt-badge>
指定类型
<mt-badge type="primary">30</mt-badge><mt-badge type="error">10</mt-badge><mt-badge type="success">10</mt-badge><mt-badge type="warning">10</mt-badge>
指定颜色
<mt-badge size="small" color="#888">自定义颜色</mt-badge>
API
Slot
- vue mint ui 使用以及例子
- vue.js中使用mint-ui框架
- vue mint-ui tabbar变组件使用
- Vue搭配mint-ui
- vue引入Mint-UI
- vue mint-ui 使用手册
- 初次接触手机端,使用vue,mint-ui
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
- mint ui 使用文档 基于vue.js的移动端ui库
- Vue修改mint-ui默认样式
- vue中配置mint-ui报css错误的问题
- vue mint-ui源码解析之loadmore组件
- vue+mint ui+省市区三级联动(编辑地址)
- VUE mint-ui mt-loadmore 上拉加载
- Mint UI -- 基于Vue.js的移动端组件库
- 基于 Vue.js 的移动端组件库mint-ui
- vue项目中使用mint-ui的上拉加载更多时,ios遇到留白情况
- mint-ui —— picker的使用
- golang interface
- Xcode界面选择ios模拟器时,机型iPhone 6(10.3)会报错显示乱码iPhone 6(1C7EC19A-1B64-4B40-...)
- SpringBoot第一个程序
- 解决问题【***.class类文件具有错误的版本52.0,应为50.0*****】,知识点整理
- 哈希(2)
- vue mint ui 使用以及例子
- 针对接口测试用例设计,我在项目中(搜狗测试)总结
- java中Interface和Object关系?
- 注解
- 云监控介绍
- 自媒体快速写文章和获取素材的几大途径
- Java网络编程
- C++之回调函数——转载
- 动态inventory脚本必须支如下两个命令行参数