mint-ui 手册
vue 2017-10-18 16:51:18

官网：http://mint-ui.github.io/#!/zh-cn

demo：https://elemefe.github.io/mint-ui/#/

Mint UI 使用文档

本文将介绍 Mint UI 的安装方式和基本的用法。

npm 安装

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

npm i mint-ui -S

CDN

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

XML/HTML Code复制内容到剪贴板
  1. <!-- 引入样式 -->  
  2. <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">  
  3. <!-- 引入组件库 -->  
  4. <script src="https://unpkg.com/mint-ui/lib/index.js"></script>  

 

 

Hello world

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

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <!-- 引入样式 -->  
  6.   <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">  
  7. </head>  
  8. <body>  
  9.   <div id="app">  
  10.     <mt-button @click.native="handleClick">按钮</mt-button>  
  11.   </div>  
  12. </body>  
  13.   <!-- 先引入 Vue -->  
  14.   <script src="https://unpkg.com/vue/dist/vue.js"></script>  
  15.   <!-- 引入组件库 -->  
  16.   <script src="https://unpkg.com/mint-ui/lib/index.js"></script>  
  17.   <script>  
  18.     new Vue({  
  19.       el: '#app',  
  20.       methods: {  
  21.         handleClick: function() {  
  22.           this.$toast('Hello world!')  
  23.         }  
  24.       }  
  25.     })  
  26.   </script>  
  27. </html>  

 

 

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

 

关于事件绑定

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

XML/HTML Code复制内容到剪贴板
  1. <my-component @click.native="handleClick">Click Me</my-component>  

 

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

XML/HTML Code复制内容到剪贴板
  1. <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 中写入以下内容：

JavaScript Code复制内容到剪贴板
  1. import Vue from 'vue'  
  2. import MintUI from 'mint-ui'  
  3. import 'mint-ui/lib/style.css'  
  4. import App from './App.vue'  
  5.   
  6. Vue.use(MintUI)  
  7.   
  8. new Vue({  
  9.   el: '#app',  
  10.   components: { App }  
  11. })  

 

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

按需引入

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

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

JavaScript Code复制内容到剪贴板
  1. {  
  2.   "presets": [  
  3.     ["es2015", { "modules": false }]  
  4.   ],  
  5.   "plugins": [["component", [  
  6.     {  
  7.       "libraryName": "mint-ui",  
  8.       "style": true  
  9.     }  
  10.   ]]]  
  11. }  

 

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

JavaScript Code复制内容到剪贴板
  1. import Vue from 'vue'  
  2. import { Button, Cell } from 'mint-ui'  
  3. import App from './App.vue'  
  4.   
  5. Vue.component(Button.name, Button)  
  6. Vue.component(Cell.name, Cell)  
  7. /* 或写为 
  8.  * Vue.use(Button) 
  9.  * Vue.use(Cell) 
  10.  */  
  11.   
  12. new Vue({  
  13.   el: '#app',  
  14.   components: { App }  
  15. })  

 

开始使用

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

npm run dev

编译：

npm run build

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

 

 

 

 

 

Toast

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

引入

import { Toast } from 'mint-ui';

例子

基本用法

Toast('提示信息');

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

JavaScript Code复制内容到剪贴板
  1. Toast({  
  2.   message: '提示',  
  3.   position: 'bottom',  
  4.   duration: 5000  
  5. });  

 

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

JavaScript Code复制内容到剪贴板
  1. Toast({  
  2.   message: '操作成功',  
  3.   iconClass: 'icon icon-success'  
  4. });  

 

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

JavaScript Code复制内容到剪贴板
  1. let instance = Toast('提示信息');  
  2. setTimeout(() => {  
  3.   instance.close();  
  4. }, 2000);  

 

API

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

 

 

 

 

Indicator

加载提示框，支持自定义文本和加载图标。

引入

import { Indicator } from 'mint-ui';

例子

当需要显示加载提示框时，调用 open 方法

Indicator.open();

在加载图标下方显示文本

Indicator.open('加载中...');

也可以在调用时传入一个对象

Indicator.open({   text: '加载中...',   spinnerType: 'fading-circle' });

调用 close 方法将其关闭

Indicator.close();

API

参数 说明 类型 可选值 默认值
text 文本内容 String    
spinnerType 加载图标的类型 String 'snake'
'fading-circle'
'double-bounce'
'triple-bounce'		 'snake'

 

  

 

Loadmore

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

引入

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

例子

XML/HTML Code复制内容到剪贴板
  1. <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore">  
  2.   <ul>  
  3.     <li v-for="item in list">{{ item }}</li>  
  4.   </ul>  
  5. </mt-loadmore>  
 
 

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

JavaScript Code复制内容到剪贴板
  1. loadTop() {  
  2.   ...// 加载更多数据  
  3.   this.$refs.loadmore.onTopLoaded();  
  4. }  

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

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

JavaScript Code复制内容到剪贴板
  1. loadBottom() {  
  2.   ...// 加载更多数据  
  3.   this.allLoaded = true;// 若数据已全部获取完毕  
  4.   this.$refs.loadmore.onBottomLoaded();  
  5. }  

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

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

自定义 HTML 模板

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

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">  
  3.     <ul>  
  4.       <li v-for="item in list">{{ item }}</li>  
  5.     </ul>  
  6.     <div slot="top" class="mint-loadmore-top">  
  7.       <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>  
  8.       <span v-show="topStatus === 'loading'">Loading...</span>  
  9.     </div>  
  10.   </mt-loadmore>  
  11. </template>  
  12. <script>  
  13.   export default {  
  14.     data() {  
  15.       return {  
  16.         topStatus: '',  
  17.         // ...  
  18.       };  
  19.     },  
  20.     methods: {  
  21.       handleTopChange(status) {  
  22.         this.topStatus = status;  
  23.       },  
  24.       // ...  
  25.     },  
  26.     // ...  
  27.   };  
  28. </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

无限滚动指令。

引入

JavaScript Code复制内容到剪贴板
  1. import { InfiniteScroll } from 'mint-ui';  
  2.   
  3. Vue.use(InfiniteScroll);  

例子

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

JavaScript Code复制内容到剪贴板
  1. <ul  
  2.   v-infinite-scroll="loadMore"  
  3.   infinite-scroll-disabled="loading"  
  4.   infinite-scroll-distance="10">  
  5.   <li v-for="item in list">{{ item }}</li>  
  6. </ul>  

 

JavaScript Code复制内容到剪贴板
  1. loadMore() {  
  2.   this.loading = true;  
  3.   setTimeout(() => {  
  4.     let last = this.list[this.list.length - 1];  
  5.     for (let i = 1; i <= 10; i++) {  
  6.       this.list.push(last + i);  
  7.     }  
  8.     this.loading = false;  
  9.   }, 2500);  
  10. }  

 

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('提示', '操作成功');

或者传入一个对象

JavaScript Code复制内容到剪贴板
  1. MessageBox({  
  2.   title: '提示',  
  3.   message: '确定执行此操作?',  
  4.   showCancelButton: true  
  5. });  

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

JavaScript Code复制内容到剪贴板
  1. MessageBox.alert(message, title);  
  2.   
  3.   
  4. MessageBox.alert('操作成功').then(action => {  
  5.   ...  
  6. });  
  7.   
  8.   
  9. MessageBox.confirm(message, title);  
  10.   
  11.   
  12. MessageBox.confirm('确定执行此操作?').then(action => {  
  13.   ...  
  14. });  
  15.   
  16.   
  17. MessageBox.prompt(message, title);  
  18.   
  19.   
  20. MessageBox.prompt('请输入姓名').then(({ value, action }) => {  
  21.   ...  
  22. });  

 

在 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

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

引入

JavaScript Code复制内容到剪贴板
  1. import { Actionsheet } from 'mint-ui';  
  2.   
  3. Vue.component(Actionsheet.name, Actionsheet);  

例子

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

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

XML/HTML Code复制内容到剪贴板
  1. <mt-actionsheet  
  2.   :actions="actions"  
  3.   v-model="sheetVisible">  
  4. </mt-actionsheet>  

API

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

 

 

Popup

弹出框，可自定义内容。

引入

JavaScript Code复制内容到剪贴板
  1. import { Popup } from 'mint-ui';  
  2.   
  3. Vue.component(Popup.name, Popup);  

例子

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

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

XML/HTML Code复制内容到剪贴板
  1. <mt-popup  
  2.   v-model="popupVisible"  
  3.   position="bottom">  
  4.   ...  
  5. </mt-popup>  

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

XML/HTML Code复制内容到剪贴板
  1. <mt-popup  
  2.   v-model="popupVisible"  
  3.   popup-transition="popup-fade">  
  4.   ...  
  5. </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

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

引入

JavaScript Code复制内容到剪贴板
  1. import { Swipe, SwipeItem } from 'mint-ui';  
  2.   
  3. Vue.component(Swipe.name, Swipe);  
  4. Vue.component(SwipeItem.name, SwipeItem);  

例子

基础用法

XML/HTML Code复制内容到剪贴板
  1. <mt-swipe :auto="4000">  
  2.   <mt-swipe-item>1</mt-swipe-item>  
  3.   <mt-swipe-item>2</mt-swipe-item>  
  4.   <mt-swipe-item>3</mt-swipe-item>  
  5. </mt-swipe>  

隐藏 indicators

XML/HTML Code复制内容到剪贴板
  1. <mt-swipe :show-indicators="false">  
  2.   <mt-swipe-item>1</mt-swipe-item>  
  3.   <mt-swipe-item>2</mt-swipe-item>  
  4.   <mt-swipe-item>3</mt-swipe-item>  
  5. </mt-swipe>  

取消自动播放

XML/HTML Code复制内容到剪贴板
  1. <mt-swipe :auto="0">  
  2.   <mt-swipe-item>1</mt-swipe-item>  
  3.   <mt-swipe-item>2</mt-swipe-item>  
  4.   <mt-swipe-item>3</mt-swipe-item>  
  5. </mt-swipe>  

 

change 事件

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

XML/HTML Code复制内容到剪贴板
  1. <mt-swipe @change="handleChange">  
  2.   <mt-swipe-item>1</mt-swipe-item>  
  3.   <mt-swipe-item>2</mt-swipe-item>  
  4.   <mt-swipe-item>3</mt-swipe-item>  
  5. </mt-swipe>  

 

JavaScript Code复制内容到剪贴板
  1. methods: {  
  2.   handleChange(index) {  
  3.     ...  
  4.   }  
  5. }  

 

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

图片懒加载指令。

引入

JavaScript Code复制内容到剪贴板
  1. import { Lazyload } from 'mint-ui';  
  2.   
  3. Vue.use(Lazyload);  

例子

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

 

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

XML/HTML Code复制内容到剪贴板
  1. <div id="container">  
  2.   <ul>  
  3.     <li v-for="item in list">  
  4.       <img v-lazy.container="item">  
  5.     </li>  
  6.   </ul>  
  7. </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

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

引入

JavaScript Code复制内容到剪贴板
  1. import { DatetimePicker } from 'mint-ui';  
  2.   
  3. Vue.component(DatetimePicker.name, DatetimePicker);  

 

例子

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

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <mt-datetime-picker  
  3.     ref="picker"  
  4.     type="time"  
  5.     v-model="pickerValue">  
  6.   </mt-datetime-picker>  
  7. </template>  
  8.   
  9. <script>  
  10.   export default {  
  11.     methods: {  
  12.       openPicker() {  
  13.         this.$refs.picker.open();  
  14.       }  
  15.     }  
  16.   };  
  17. </script>  

 

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

XML/HTML Code复制内容到剪贴板
  1. <mt-datetime-picker  
  2.   v-model="pickerVisible"  
  3.   type="date"  
  4.   year-format="{value} 年"  
  5.   month-format="{value} 月"  
  6.   date-format="{value} 日">  
  7. </mt-datetime-picker>  

 

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

XML/HTML Code复制内容到剪贴板
  1. <mt-datetime-picker  
  2.   v-model="pickerVisible"  
  3.   type="time"  
  4.   @confirm="handleConfirm">  
  5. </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 的内容

 

 

Palette Button

调色板按钮

引入

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

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/177.html

上一篇 安装axios组件替换vue-resource，ajax交互
下一篇 vue-touch
相关的文章
Powered by yoyo苏ICP备15045725号