淵波太郎
淵波太郎

mint-ui使用手册

npm 安装

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

npm i mint-ui -S

CDN

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

Hello world

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

 

  6. 按钮

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

     

    关于事件绑定

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

    Click Me

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

    Click Me

     

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

     

    快速上手

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

    使用 vue-cli

     

    1. npm install -g vue-cli

    2.  

    3. vue init webpack projectname

    引入 Mint UI

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

    完整引入

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

     

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

    2.  

    3. Vue.use(MintUI)

    4.  

    5. new Vue({

    6. el: '#app',

    7. components: { App }

    8. })

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

    按需引入

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

    首先，安装 babel-plugin-component：

    npm install babel-plugin-component -D

    然后，将 .babelrc 修改为：

     

    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 中写入以下内容：

     

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

    2.  

    3. Vue.component(Button.name, Button)

    4. Vue.component(Cell.name, Cell)

    5. /* 或写为

    6. * Vue.use(Button)

    7. * Vue.use(Cell)

    8. */

    9.  

    10. new Vue({

    11. el: '#app',

    12. components: { App }

    13. })

    开始使用

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

    npm run dev

    编译：

    npm run build

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

    Toast

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

    引入

    import { Toast } from 'mint-ui';

    例子

    基本用法

    Toast('提示信息');

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

     

    1. Toast({

    2. message: '提示',

    3. position: 'bottom',

    4. duration: 5000

    5. });

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

     

    1. Toast({

    2. message: '操作成功',

    3. iconClass: 'icon icon-success'

    4. });

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

     

    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

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

    引入

     

    1. import { Loadmore } from 'mint-ui';

    2.  

    3. Vue.component(Loadmore.name, Loadmore);

    例子

     

      • {{ item }}

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

     

    1. loadTop() {

    2. ...// 加载更多数据

    3. this.$refs.loadmore.onTopLoaded();

    4. }

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

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

     

    1. loadBottom() {

    2. ...// 加载更多数据

    3. this.allLoaded = true;// 若数据已全部获取完毕

    4. this.$refs.loadmore.onBottomLoaded();

    5. }

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

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

    自定义 HTML 模板

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

     

    比如需要配置列表顶部的 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

    无限滚动指令。

    引入

     

    1. import { InfiniteScroll } from 'mint-ui';

    2.  

    3. Vue.use(InfiniteScroll);

    例子

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

     

    2. v-infinite-scroll="loadMore"

    3. infinite-scroll-disabled="loading"

    4. infinite-scroll-distance="10">

    6. {{ item }}

     

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

    或者传入一个对象

     

    1. MessageBox({

    2. title: '提示',

    3. message: '确定执行此操作?',

    4. showCancelButton: true

    5. });

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

    MessageBox.alert(message, title);

     

    1. MessageBox.alert('操作成功').then(action => {

    2. ...

    3. });

    MessageBox.confirm(message, title);

     

    1. MessageBox.confirm('确定执行此操作?').then(action => {

    2. ...

    3. });

    MessageBox.prompt(message, title);

     

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

    2. ...

    3. });

    在 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

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

    引入

     

    1. import { Actionsheet } from 'mint-ui';

    2.  

    3. Vue.component(Actionsheet.name, Actionsheet);

    例子

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

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

     

    2. :actions="actions"

    3. v-model="sheetVisible">

    API

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

    Popup

    弹出框，可自定义内容。

    引入

     

    1. import { Popup } from 'mint-ui';

    2.  

    3. Vue.component(Popup.name, Popup);

    例子

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

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

     

    2. v-model="popupVisible"

    3. position="bottom">

    4. ...

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

     

    2. v-model="popupVisible"

    3. popup-transition="popup-fade">

    4. ...

    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

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

    引入

     

    1. import { Swipe, SwipeItem } from 'mint-ui';

    2.  

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

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

    例子

    基础用法

     

    2. 1

    3. 2

    4. 3

    隐藏 indicators

     

    2. 1

    3. 2

    4. 3

    取消自动播放

     

    2. 1

    3. 2

    4. 3

    change 事件

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

     

    2. 1

    3. 2

    4. 3

     

    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

    图片懒加载指令。

    引入

     

    1. import { Lazyload } from 'mint-ui';

    2.  

    3. Vue.use(Lazyload);

    例子

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

     

    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

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

     

     

         

           

         

       

     

     

    Range

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

    引入

     

    1. import { Range } from 'mint-ui';

    2.  

    3. Vue.component(Range.name, Range);

    例子

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

    更多的配置项

     

    2. v-model="rangeValue"

    3. :min="10"

    4. :max="90"

    5. :step="10"

    6. :bar-height="5">

    可在滑块两侧显示文字

     

    2. 0

    3. 100

    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

    进度条。

    引入

     

    1. import { Progress } from 'mint-ui';

    2.  

    3. Vue.component(Progress.name, Progress);

    例子

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

    可在进度条两侧显示文字

     

    2. 0%

    3. 100%

    API

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

    Slot

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

    Picker

    选择器，支持多 slot 联动。

    引入

     

    1. import { Picker } from 'mint-ui';

    2.  

    3. Vue.component(Picker.name, Picker);

    例子

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

     

    1. export default {

    2. methods: {

    3. onValuesChange(picker, values) {

    4. if (values[0] > values[1]) {

    5. picker.setSlotValue(1, values[0]);

    6. }

    7. }

    8. },

    9. data() {

    10. return {

    11. slots: [

    12. {

    13. flex: 1,

    14. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    15. className: 'slot1',

    16. textAlign: 'right'

    17. }, {

    18. divider: true,

    19. content: '-',

    20. className: 'slot2'

    21. }, {

    22. flex: 1,

    23. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    24. className: 'slot3',

    25. textAlign: 'left'

    26. }

    27. ]

    28. };

    29. }

    30. };

    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

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

    引入

     

    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，分别用于打开和关闭选择器。

     

    2.  

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

     

    2. v-model="pickerVisible"

    3. type="date"

    4. year-format="{value} 年"

    5. month-format="{value} 月"

    6. date-format="{value} 日">

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

     

    2. v-model="pickerVisible"

    3. type="time"

    4. @confirm="handleConfirm">

    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

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

    引入

     

    1. import { IndexList, IndexSection } from 'mint-ui';

    2.  

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

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

    例子

     

    11. ...

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

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

     

    2. ...

    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 的内容

     

    调色板按钮

    引入

     

    1. import { PaletteButton } from 'mint-ui';

    2.  

    3. Vue.component(PaletteButton.name, PaletteButton);

    例子

    基本用法

     

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

     

    1. methods: {

    2. main_log(val) {

    3. console.log('main_log', val);

    4. },

    5. sub_log(val) {

    6. console.log('sub_log', val);

    7. this.$refs.target_1.collapse();

    8. }

    9. }

     

    2. direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"

    3. style="left:30px;">

    选项

    参数 说明 类型 可选值 默认值
    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

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

    引入

     

    1. import { Header } from 'mint-ui';

    2.  

    3. Vue.component(Header.name, Header);

    例子

    固定在页面顶部

    设置 left 或 right slot

     

    3. 返回

    设置多个按钮

     

    3. 返回

    4. 关闭

    API

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

    Slot

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

     

    Tabbar

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

    引入

     

    1. import { Tabbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    4. 外卖

    8. 订单

    12. 发现

    16. 我的

    API

    tabbar

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

    tab-item

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

    Slot

    tabbar

    name 描述
    - 内容

    tab-item

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

     

    Navbar

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

    引入

     

    1. import { Navbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    2. 选项一

    3. 选项二

    4. 选项三

    5.  

    API

    navbar

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

    tab-item

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

    Slot

    navbar

    name 描述
    - 内容

    tab-item

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

     

    Button

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

    引入

     

    1. import { Button } from 'mint-ui';

    2.  

    3. Vue.component(Button.name, Button);

    例子

    改变颜色

    defaultprimarydanger

    改变大小

    smalllargenormal

    禁用按钮

    disabled

    幽灵按钮

    plain

    带图标

    back更多

    自定义图标

     

    3. 带自定义图标

    绑定 click 事件

    点击触发 handleClick

    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

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

    引入

     

    1. import { Cell } from 'mint-ui';

    2.  

    3. Vue.component(Cell.name, Cell);

    例子

    基础用法

    可点击的链接

     

    2. title="标题文字"

    3. to="//github.com"

    4. is-link

    5. value="带链接">

    带图标

    带自定义图标

     

    2. icon 是图片

    自定义内容

     

    2. 这里是元素

    带备注信息

    API

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

    Slot

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

    Cell Swipe

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

    引入

     

    1. import { CellSwipe } from 'mint-ui';

    2.  

    3. Vue.component(CellSwipe.name, CellSwipe);

    例子

    增加右滑动按钮

     

    2. title="标题文字"

    3. :right="[

    4. {

    5. content: 'Delete',

    6. style: { background: 'red', color: '#fff' },

    7. handler: () => this.$messagebox('delete')

    8. }

    9. ]">

    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

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

    引入

     

    1. import { Spinner } from 'mint-ui';

    2.  

    3. Vue.component(Spinner.name, Spinner);

    例子

    指定类型

     

    2.  

    指定颜色

    指定尺寸

    API

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

    tab-container

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

    引入

     

    1. import { TabContainer, TabContainerItem } from 'mint-ui';

    2.  

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

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

    例子

    改变 ative 的值，与  的 id 一致即显示对应页面。

     

    API

    tab-container

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

    tab-container-item

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

    Slot

    tab-container

    name 描述
    - 内容

    tab-container-item

    name 描述
    - 内容

    Search

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

    引入

     

    1. import { Search } from 'mint-ui';

    2.  

    3. Vue.component(Search.name, Search);

    例子

    基础用法

    设置显示文字

     

    2. v-model="value"

    3. cancel-text="取消"

    4. placeholder="搜索">

    带搜索结果

    自定义搜索结果

     

    3. v-for="item in result"

    4. :title="item.title"

    5. :value="item.value">

    API

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

    Slot

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

     

    Switch

    开关。

    引入

     

    1. import { Switch } from 'mint-ui';

    2.  

    3. Vue.component(Switch.name, Switch);

    例子

    带显示内容

    开关

    API

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

    Event

    名称 返回值
    change checked: Boolean

    Slot

    name 描述
    - 显示内容

     

    Checklist

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

    引入

     

    1. import { Checklist } from 'mint-ui';

    2.  

    3. Vue.component(Checklist.name, Checklist);

    例子

    基本用法

     

    2. title="复选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选中禁用',

    9. value: '选中禁用的值',

    10. disabled: true

    11. },

    12. {

    13. label: '选项A',

    14. value: '值A'

    15. },

    16. {

    17. label: '选项B',

    18. value: '值B'

    19. }

    20. ];

     

    2. v-model="value"

    3. :options="options">

    设置最大可选数

     

    2. :max="2"

    3. v-model="value"

    4. :options="options">

    选择框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

     

    Radio

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

    引入

     

    1. import { Radio } from 'mint-ui';

    2.  

    3. Vue.component(Radio.name, Radio);

    例子

    基本用法

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选项A',

    9. value: '值A'

    10. },

    11. {

    12. label: '选项B',

    13. value: '值B'

    14. }

    15. ];

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="options">

    单选框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

    Field

    表单编辑器。

    引入

     

    1. import { Field } from 'mint-ui';

    2.  

    3. Vue.component(Field.name, 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

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

    引入

     

    1. import { Badge } from 'mint-ui';

    2.  

    3. Vue.component(Badge.name, Badge);

    例子

    指定尺寸

    301010

    指定类型

    30101010

    指定颜色

    自定义颜色

    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 文件即可开始使用。

    Hello world

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

     

    6. 按钮

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

     

    关于事件绑定

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

    Click Me

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

    Click Me

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

     

    快速上手

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

    使用 vue-cli

     

    1. npm install -g vue-cli

    2.  

    3. vue init webpack projectname

    引入 Mint UI

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

    完整引入

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

     

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

    2.  

    3. Vue.use(MintUI)

    4.  

    5. new Vue({

    6. el: '#app',

    7. components: { App }

    8. })

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

    按需引入

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

    首先，安装 babel-plugin-component：

    npm install babel-plugin-component -D

    然后，将 .babelrc 修改为：

     

    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 中写入以下内容：

     

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

    2.  

    3. Vue.component(Button.name, Button)

    4. Vue.component(Cell.name, Cell)

    5. /* 或写为

    6. * Vue.use(Button)

    7. * Vue.use(Cell)

    8. */

    9.  

    10. new Vue({

    11. el: '#app',

    12. components: { App }

    13. })

    开始使用

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

    npm run dev

    编译：

    npm run build

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

    Toast

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

    引入

    import { Toast } from 'mint-ui';

    例子

    基本用法

    Toast('提示信息');

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

     

    1. Toast({

    2. message: '提示',

    3. position: 'bottom',

    4. duration: 5000

    5. });

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

     

    1. Toast({

    2. message: '操作成功',

    3. iconClass: 'icon icon-success'

    4. });

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

     

    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

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

    引入

     

    1. import { Loadmore } from 'mint-ui';

    2.  

    3. Vue.component(Loadmore.name, Loadmore);

    例子

     

      • {{ item }}

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

     

    1. loadTop() {

    2. ...// 加载更多数据

    3. this.$refs.loadmore.onTopLoaded();

    4. }

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

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

     

    1. loadBottom() {

    2. ...// 加载更多数据

    3. this.allLoaded = true;// 若数据已全部获取完毕

    4. this.$refs.loadmore.onBottomLoaded();

    5. }

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

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

    自定义 HTML 模板

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

     

    比如需要配置列表顶部的 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

    无限滚动指令。

    引入

     

    1. import { InfiniteScroll } from 'mint-ui';

    2.  

    3. Vue.use(InfiniteScroll);

    例子

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

     

    2. v-infinite-scroll="loadMore"

    3. infinite-scroll-disabled="loading"

    4. infinite-scroll-distance="10">

    6. {{ item }}

     

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

    或者传入一个对象

     

    1. MessageBox({

    2. title: '提示',

    3. message: '确定执行此操作?',

    4. showCancelButton: true

    5. });

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

    MessageBox.alert(message, title);

     

    1. MessageBox.alert('操作成功').then(action => {

    2. ...

    3. });

    MessageBox.confirm(message, title);

     

    1. MessageBox.confirm('确定执行此操作?').then(action => {

    2. ...

    3. });

    MessageBox.prompt(message, title);

     

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

    2. ...

    3. });

    在 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

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

    引入

     

    1. import { Actionsheet } from 'mint-ui';

    2.  

    3. Vue.component(Actionsheet.name, Actionsheet);

    例子

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

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

     

    2. :actions="actions"

    3. v-model="sheetVisible">

    API

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

    Popup

    弹出框，可自定义内容。

    引入

     

    1. import { Popup } from 'mint-ui';

    2.  

    3. Vue.component(Popup.name, Popup);

    例子

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

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

     

    2. v-model="popupVisible"

    3. position="bottom">

    4. ...

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

     

    2. v-model="popupVisible"

    3. popup-transition="popup-fade">

    4. ...

    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

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

    引入

     

    1. import { Swipe, SwipeItem } from 'mint-ui';

    2.  

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

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

    例子

    基础用法

     

    2. 1

    3. 2

    4. 3

    隐藏 indicators

     

    2. 1

    3. 2

    4. 3

    取消自动播放

     

    2. 1

    3. 2

    4. 3

    change 事件

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

     

    2. 1

    3. 2

    4. 3

     

    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

    图片懒加载指令。

    引入

     

    1. import { Lazyload } from 'mint-ui';

    2.  

    3. Vue.use(Lazyload);

    例子

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

     

    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

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

     

     

         

           

         

       

     

     

    Range

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

    引入

     

    1. import { Range } from 'mint-ui';

    2.  

    3. Vue.component(Range.name, Range);

    例子

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

    更多的配置项

     

    2. v-model="rangeValue"

    3. :min="10"

    4. :max="90"

    5. :step="10"

    6. :bar-height="5">

    可在滑块两侧显示文字

     

    2. 0

    3. 100

    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

    进度条。

    引入

     

    1. import { Progress } from 'mint-ui';

    2.  

    3. Vue.component(Progress.name, Progress);

    例子

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

    可在进度条两侧显示文字

     

    2. 0%

    3. 100%

    API

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

    Slot

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

    Picker

    选择器，支持多 slot 联动。

    引入

     

    1. import { Picker } from 'mint-ui';

    2.  

    3. Vue.component(Picker.name, Picker);

    例子

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

     

    1. export default {

    2. methods: {

    3. onValuesChange(picker, values) {

    4. if (values[0] > values[1]) {

    5. picker.setSlotValue(1, values[0]);

    6. }

    7. }

    8. },

    9. data() {

    10. return {

    11. slots: [

    12. {

    13. flex: 1,

    14. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    15. className: 'slot1',

    16. textAlign: 'right'

    17. }, {

    18. divider: true,

    19. content: '-',

    20. className: 'slot2'

    21. }, {

    22. flex: 1,

    23. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    24. className: 'slot3',

    25. textAlign: 'left'

    26. }

    27. ]

    28. };

    29. }

    30. };

    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

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

    引入

     

    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，分别用于打开和关闭选择器。

     

    2.  

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

     

    2. v-model="pickerVisible"

    3. type="date"

    4. year-format="{value} 年"

    5. month-format="{value} 月"

    6. date-format="{value} 日">

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

     

    2. v-model="pickerVisible"

    3. type="time"

    4. @confirm="handleConfirm">

    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

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

    引入

     

    1. import { IndexList, IndexSection } from 'mint-ui';

    2.  

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

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

    例子

     

    11. ...

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

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

     

    2. ...

    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 的内容

     

    调色板按钮

    引入

     

    1. import { PaletteButton } from 'mint-ui';

    2.  

    3. Vue.component(PaletteButton.name, PaletteButton);

    例子

    基本用法

     

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

     

    1. methods: {

    2. main_log(val) {

    3. console.log('main_log', val);

    4. },

    5. sub_log(val) {

    6. console.log('sub_log', val);

    7. this.$refs.target_1.collapse();

    8. }

    9. }

     

    2. direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"

    3. style="left:30px;">

    选项

    参数 说明 类型 可选值 默认值
    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

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

    引入

     

    1. import { Header } from 'mint-ui';

    2.  

    3. Vue.component(Header.name, Header);

    例子

    固定在页面顶部

    设置 left 或 right slot

     

    3. 返回

    设置多个按钮

     

    3. 返回

    4. 关闭

    API

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

    Slot

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

     

    Tabbar

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

    引入

     

    1. import { Tabbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    4. 外卖

    8. 订单

    12. 发现

    16. 我的

    API

    tabbar

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

    tab-item

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

    Slot

    tabbar

    name 描述
    - 内容

    tab-item

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

     

    Navbar

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

    引入

     

    1. import { Navbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    2. 选项一

    3. 选项二

    4. 选项三

    5.  

    API

    navbar

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

    tab-item

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

    Slot

    navbar

    name 描述
    - 内容

    tab-item

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

     

    Button

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

    引入

     

    1. import { Button } from 'mint-ui';

    2.  

    3. Vue.component(Button.name, Button);

    例子

    改变颜色

    defaultprimarydanger

    改变大小

    smalllargenormal

    禁用按钮

    disabled

    幽灵按钮

    plain

    带图标

    back更多

    自定义图标

     

    3. 带自定义图标

    绑定 click 事件

    点击触发 handleClick

    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

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

    引入

     

    1. import { Cell } from 'mint-ui';

    2.  

    3. Vue.component(Cell.name, Cell);

    例子

    基础用法

    可点击的链接

     

    2. title="标题文字"

    3. to="//github.com"

    4. is-link

    5. value="带链接">

    带图标

    带自定义图标

     

    2. icon 是图片

    自定义内容

     

    2. 这里是元素

    带备注信息

    API

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

    Slot

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

    Cell Swipe

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

    引入

     

    1. import { CellSwipe } from 'mint-ui';

    2.  

    3. Vue.component(CellSwipe.name, CellSwipe);

    例子

    增加右滑动按钮

     

    2. title="标题文字"

    3. :right="[

    4. {

    5. content: 'Delete',

    6. style: { background: 'red', color: '#fff' },

    7. handler: () => this.$messagebox('delete')

    8. }

    9. ]">

    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

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

    引入

     

    1. import { Spinner } from 'mint-ui';

    2.  

    3. Vue.component(Spinner.name, Spinner);

    例子

    指定类型

     

    2.  

    指定颜色

    指定尺寸

    API

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

    tab-container

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

    引入

     

    1. import { TabContainer, TabContainerItem } from 'mint-ui';

    2.  

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

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

    例子

    改变 ative 的值，与  的 id 一致即显示对应页面。

     

    API

    tab-container

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

    tab-container-item

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

    Slot

    tab-container

    name 描述
    - 内容

    tab-container-item

    name 描述
    - 内容

    Search

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

    引入

     

    1. import { Search } from 'mint-ui';

    2.  

    3. Vue.component(Search.name, Search);

    例子

    基础用法

    设置显示文字

     

    2. v-model="value"

    3. cancel-text="取消"

    4. placeholder="搜索">

    带搜索结果

    自定义搜索结果

     

    3. v-for="item in result"

    4. :title="item.title"

    5. :value="item.value">

    API

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

    Slot

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

     

    Switch

    开关。

    引入

     

    1. import { Switch } from 'mint-ui';

    2.  

    3. Vue.component(Switch.name, Switch);

    例子

    带显示内容

    开关

    API

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

    Event

    名称 返回值
    change checked: Boolean

    Slot

    name 描述
    - 显示内容

     

    Checklist

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

    引入

     

    1. import { Checklist } from 'mint-ui';

    2.  

    3. Vue.component(Checklist.name, Checklist);

    例子

    基本用法

     

    2. title="复选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选中禁用',

    9. value: '选中禁用的值',

    10. disabled: true

    11. },

    12. {

    13. label: '选项A',

    14. value: '值A'

    15. },

    16. {

    17. label: '选项B',

    18. value: '值B'

    19. }

    20. ];

     

    2. v-model="value"

    3. :options="options">

    设置最大可选数

     

    2. :max="2"

    3. v-model="value"

    4. :options="options">

    选择框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

     

    Radio

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

    引入

     

    1. import { Radio } from 'mint-ui';

    2.  

    3. Vue.component(Radio.name, Radio);

    例子

    基本用法

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选项A',

    9. value: '值A'

    10. },

    11. {

    12. label: '选项B',

    13. value: '值B'

    14. }

    15. ];

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="options">

    单选框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

    Field

    表单编辑器。

    引入

     

    1. import { Field } from 'mint-ui';

    2.  

    3. Vue.component(Field.name, 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

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

    引入

     

    1. import { Badge } from 'mint-ui';

    2.  

    3. Vue.component(Badge.name, Badge);

    例子

    指定尺寸

    301010

    指定类型

    30101010

    指定颜色

    自定义颜色

    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 文件即可开始使用。

    Hello world

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

     

    6. 按钮

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

     

    关于事件绑定

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

    Click Me

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

    Click Me

     

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

     

    快速上手

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

    使用 vue-cli

     

    1. npm install -g vue-cli

    2.  

    3. vue init webpack projectname

    引入 Mint UI

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

    完整引入

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

     

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

    2.  

    3. Vue.use(MintUI)

    4.  

    5. new Vue({

    6. el: '#app',

    7. components: { App }

    8. })

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

    按需引入

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

    首先，安装 babel-plugin-component：

    npm install babel-plugin-component -D

    然后，将 .babelrc 修改为：

     

    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 中写入以下内容：

     

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

    2.  

    3. Vue.component(Button.name, Button)

    4. Vue.component(Cell.name, Cell)

    5. /* 或写为

    6. * Vue.use(Button)

    7. * Vue.use(Cell)

    8. */

    9.  

    10. new Vue({

    11. el: '#app',

    12. components: { App }

    13. })

    开始使用

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

    npm run dev

    编译：

    npm run build

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

    Toast

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

    引入

    import { Toast } from 'mint-ui';

    例子

    基本用法

    Toast('提示信息');

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

     

    1. Toast({

    2. message: '提示',

    3. position: 'bottom',

    4. duration: 5000

    5. });

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

     

    1. Toast({

    2. message: '操作成功',

    3. iconClass: 'icon icon-success'

    4. });

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

     

    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

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

    引入

     

    1. import { Loadmore } from 'mint-ui';

    2.  

    3. Vue.component(Loadmore.name, Loadmore);

    例子

     

      • {{ item }}

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

     

    1. loadTop() {

    2. ...// 加载更多数据

    3. this.$refs.loadmore.onTopLoaded();

    4. }

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

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

     

    1. loadBottom() {

    2. ...// 加载更多数据

    3. this.allLoaded = true;// 若数据已全部获取完毕

    4. this.$refs.loadmore.onBottomLoaded();

    5. }

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

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

    自定义 HTML 模板

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

     

    比如需要配置列表顶部的 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

    无限滚动指令。

    引入

     

    1. import { InfiniteScroll } from 'mint-ui';

    2.  

    3. Vue.use(InfiniteScroll);

    例子

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

     

    2. v-infinite-scroll="loadMore"

    3. infinite-scroll-disabled="loading"

    4. infinite-scroll-distance="10">

    6. {{ item }}

     

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

    或者传入一个对象

     

    1. MessageBox({

    2. title: '提示',

    3. message: '确定执行此操作?',

    4. showCancelButton: true

    5. });

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

    MessageBox.alert(message, title);

     

    1. MessageBox.alert('操作成功').then(action => {

    2. ...

    3. });

    MessageBox.confirm(message, title);

     

    1. MessageBox.confirm('确定执行此操作?').then(action => {

    2. ...

    3. });

    MessageBox.prompt(message, title);

     

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

    2. ...

    3. });

    在 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

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

    引入

     

    1. import { Actionsheet } from 'mint-ui';

    2.  

    3. Vue.component(Actionsheet.name, Actionsheet);

    例子

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

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

     

    2. :actions="actions"

    3. v-model="sheetVisible">

    API

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

    Popup

    弹出框，可自定义内容。

    引入

     

    1. import { Popup } from 'mint-ui';

    2.  

    3. Vue.component(Popup.name, Popup);

    例子

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

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

     

    2. v-model="popupVisible"

    3. position="bottom">

    4. ...

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

     

    2. v-model="popupVisible"

    3. popup-transition="popup-fade">

    4. ...

    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

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

    引入

     

    1. import { Swipe, SwipeItem } from 'mint-ui';

    2.  

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

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

    例子

    基础用法

     

    2. 1

    3. 2

    4. 3

    隐藏 indicators

     

    2. 1

    3. 2

    4. 3

    取消自动播放

     

    2. 1

    3. 2

    4. 3

    change 事件

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

     

    2. 1

    3. 2

    4. 3

     

    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

    图片懒加载指令。

    引入

     

    1. import { Lazyload } from 'mint-ui';

    2.  

    3. Vue.use(Lazyload);

    例子

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

     

    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

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

     

     

         

           

         

       

     

     

    Range

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

    引入

     

    1. import { Range } from 'mint-ui';

    2.  

    3. Vue.component(Range.name, Range);

    例子

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

    更多的配置项

     

    2. v-model="rangeValue"

    3. :min="10"

    4. :max="90"

    5. :step="10"

    6. :bar-height="5">

    可在滑块两侧显示文字

     

    2. 0

    3. 100

    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

    进度条。

    引入

     

    1. import { Progress } from 'mint-ui';

    2.  

    3. Vue.component(Progress.name, Progress);

    例子

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

    可在进度条两侧显示文字

     

    2. 0%

    3. 100%

    API

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

    Slot

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

    Picker

    选择器，支持多 slot 联动。

    引入

     

    1. import { Picker } from 'mint-ui';

    2.  

    3. Vue.component(Picker.name, Picker);

    例子

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

     

    1. export default {

    2. methods: {

    3. onValuesChange(picker, values) {

    4. if (values[0] > values[1]) {

    5. picker.setSlotValue(1, values[0]);

    6. }

    7. }

    8. },

    9. data() {

    10. return {

    11. slots: [

    12. {

    13. flex: 1,

    14. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    15. className: 'slot1',

    16. textAlign: 'right'

    17. }, {

    18. divider: true,

    19. content: '-',

    20. className: 'slot2'

    21. }, {

    22. flex: 1,

    23. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    24. className: 'slot3',

    25. textAlign: 'left'

    26. }

    27. ]

    28. };

    29. }

    30. };

    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

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

    引入

     

    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，分别用于打开和关闭选择器。

     

    2.  

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

     

    2. v-model="pickerVisible"

    3. type="date"

    4. year-format="{value} 年"

    5. month-format="{value} 月"

    6. date-format="{value} 日">

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

     

    2. v-model="pickerVisible"

    3. type="time"

    4. @confirm="handleConfirm">

    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

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

    引入

     

    1. import { IndexList, IndexSection } from 'mint-ui';

    2.  

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

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

    例子

     

    11. ...

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

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

     

    2. ...

    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 的内容

     

    调色板按钮

    引入

     

    1. import { PaletteButton } from 'mint-ui';

    2.  

    3. Vue.component(PaletteButton.name, PaletteButton);

    例子

    基本用法

     

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

     

    1. methods: {

    2. main_log(val) {

    3. console.log('main_log', val);

    4. },

    5. sub_log(val) {

    6. console.log('sub_log', val);

    7. this.$refs.target_1.collapse();

    8. }

    9. }

     

    2. direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"

    3. style="left:30px;">

    选项

    参数 说明 类型 可选值 默认值
    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

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

    引入

     

    1. import { Header } from 'mint-ui';

    2.  

    3. Vue.component(Header.name, Header);

    例子

    固定在页面顶部

    设置 left 或 right slot

     

    3. 返回

    设置多个按钮

     

    3. 返回

    4. 关闭

    API

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

    Slot

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

     

    Tabbar

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

    引入

     

    1. import { Tabbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    4. 外卖

    8. 订单

    12. 发现

    16. 我的

    API

    tabbar

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

    tab-item

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

    Slot

    tabbar

    name 描述
    - 内容

    tab-item

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

     

    Navbar

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

    引入

     

    1. import { Navbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    2. 选项一

    3. 选项二

    4. 选项三

    5.  

    API

    navbar

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

    tab-item

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

    Slot

    navbar

    name 描述
    - 内容

    tab-item

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

     

    Button

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

    引入

     

    1. import { Button } from 'mint-ui';

    2.  

    3. Vue.component(Button.name, Button);

    例子

    改变颜色

    defaultprimarydanger

    改变大小

    smalllargenormal

    禁用按钮

    disabled

    幽灵按钮

    plain

    带图标

    back更多

    自定义图标

     

    3. 带自定义图标

    绑定 click 事件

    点击触发 handleClick

    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

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

    引入

     

    1. import { Cell } from 'mint-ui';

    2.  

    3. Vue.component(Cell.name, Cell);

    例子

    基础用法

    可点击的链接

     

    2. title="标题文字"

    3. to="//github.com"

    4. is-link

    5. value="带链接">

    带图标

    带自定义图标

     

    2. icon 是图片

    自定义内容

     

    2. 这里是元素

    带备注信息

    API

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

    Slot

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

    Cell Swipe

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

    引入

     

    1. import { CellSwipe } from 'mint-ui';

    2.  

    3. Vue.component(CellSwipe.name, CellSwipe);

    例子

    增加右滑动按钮

     

    2. title="标题文字"

    3. :right="[

    4. {

    5. content: 'Delete',

    6. style: { background: 'red', color: '#fff' },

    7. handler: () => this.$messagebox('delete')

    8. }

    9. ]">

    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

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

    引入

     

    1. import { Spinner } from 'mint-ui';

    2.  

    3. Vue.component(Spinner.name, Spinner);

    例子

    指定类型

     

    2.  

    指定颜色

    指定尺寸

    API

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

    tab-container

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

    引入

     

    1. import { TabContainer, TabContainerItem } from 'mint-ui';

    2.  

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

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

    例子

    改变 ative 的值，与  的 id 一致即显示对应页面。

     

    API

    tab-container

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

    tab-container-item

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

    Slot

    tab-container

    name 描述
    - 内容

    tab-container-item

    name 描述
    - 内容

    Search

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

    引入

     

    1. import { Search } from 'mint-ui';

    2.  

    3. Vue.component(Search.name, Search);

    例子

    基础用法

    设置显示文字

     

    2. v-model="value"

    3. cancel-text="取消"

    4. placeholder="搜索">

    带搜索结果

    自定义搜索结果

     

    3. v-for="item in result"

    4. :title="item.title"

    5. :value="item.value">

    API

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

    Slot

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

     

    Switch

    开关。

    引入

     

    1. import { Switch } from 'mint-ui';

    2.  

    3. Vue.component(Switch.name, Switch);

    例子

    带显示内容

    开关

    API

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

    Event

    名称 返回值
    change checked: Boolean

    Slot

    name 描述
    - 显示内容

     

    Checklist

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

    引入

     

    1. import { Checklist } from 'mint-ui';

    2.  

    3. Vue.component(Checklist.name, Checklist);

    例子

    基本用法

     

    2. title="复选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选中禁用',

    9. value: '选中禁用的值',

    10. disabled: true

    11. },

    12. {

    13. label: '选项A',

    14. value: '值A'

    15. },

    16. {

    17. label: '选项B',

    18. value: '值B'

    19. }

    20. ];

     

    2. v-model="value"

    3. :options="options">

    设置最大可选数

     

    2. :max="2"

    3. v-model="value"

    4. :options="options">

    选择框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

     

    Radio

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

    引入

     

    1. import { Radio } from 'mint-ui';

    2.  

    3. Vue.component(Radio.name, Radio);

    例子

    基本用法

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选项A',

    9. value: '值A'

    10. },

    11. {

    12. label: '选项B',

    13. value: '值B'

    14. }

    15. ];

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="options">

    单选框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

    Field

    表单编辑器。

    引入

     

    1. import { Field } from 'mint-ui';

    2.  

    3. Vue.component(Field.name, 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

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

    引入

     

    1. import { Badge } from 'mint-ui';

    2.  

    3. Vue.component(Badge.name, Badge);

    例子

    指定尺寸

    301010

    指定类型

    30101010

    指定颜色

    自定义颜色

    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 文件即可开始使用。

    Hello world

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

     

    6. 按钮

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

     

    关于事件绑定

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

    Click Me

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

    Click Me

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

     

    快速上手

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

    使用 vue-cli

     

    1. npm install -g vue-cli

    2.  

    3. vue init webpack projectname

    引入 Mint UI

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

    完整引入

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

     

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

    2.  

    3. Vue.use(MintUI)

    4.  

    5. new Vue({

    6. el: '#app',

    7. components: { App }

    8. })

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

    按需引入

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

    首先，安装 babel-plugin-component：

    npm install babel-plugin-component -D

    然后，将 .babelrc 修改为：

     

    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 中写入以下内容：

     

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

    2.  

    3. Vue.component(Button.name, Button)

    4. Vue.component(Cell.name, Cell)

    5. /* 或写为

    6. * Vue.use(Button)

    7. * Vue.use(Cell)

    8. */

    9.  

    10. new Vue({

    11. el: '#app',

    12. components: { App }

    13. })

    开始使用

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

    npm run dev

    编译：

    npm run build

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

    Toast

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

    引入

    import { Toast } from 'mint-ui';

    例子

    基本用法

    Toast('提示信息');

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

     

    1. Toast({

    2. message: '提示',

    3. position: 'bottom',

    4. duration: 5000

    5. });

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

     

    1. Toast({

    2. message: '操作成功',

    3. iconClass: 'icon icon-success'

    4. });

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

     

    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

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

    引入

     

    1. import { Loadmore } from 'mint-ui';

    2.  

    3. Vue.component(Loadmore.name, Loadmore);

    例子

     

      • {{ item }}

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

     

    1. loadTop() {

    2. ...// 加载更多数据

    3. this.$refs.loadmore.onTopLoaded();

    4. }

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

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

     

    1. loadBottom() {

    2. ...// 加载更多数据

    3. this.allLoaded = true;// 若数据已全部获取完毕

    4. this.$refs.loadmore.onBottomLoaded();

    5. }

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

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

    自定义 HTML 模板

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

     

    比如需要配置列表顶部的 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

    无限滚动指令。

    引入

     

    1. import { InfiniteScroll } from 'mint-ui';

    2.  

    3. Vue.use(InfiniteScroll);

    例子

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

     

    2. v-infinite-scroll="loadMore"

    3. infinite-scroll-disabled="loading"

    4. infinite-scroll-distance="10">

    6. {{ item }}

     

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

    或者传入一个对象

     

    1. MessageBox({

    2. title: '提示',

    3. message: '确定执行此操作?',

    4. showCancelButton: true

    5. });

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

    MessageBox.alert(message, title);

     

    1. MessageBox.alert('操作成功').then(action => {

    2. ...

    3. });

    MessageBox.confirm(message, title);

     

    1. MessageBox.confirm('确定执行此操作?').then(action => {

    2. ...

    3. });

    MessageBox.prompt(message, title);

     

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

    2. ...

    3. });

    在 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

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

    引入

     

    1. import { Actionsheet } from 'mint-ui';

    2.  

    3. Vue.component(Actionsheet.name, Actionsheet);

    例子

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

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

     

    2. :actions="actions"

    3. v-model="sheetVisible">

    API

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

    Popup

    弹出框，可自定义内容。

    引入

     

    1. import { Popup } from 'mint-ui';

    2.  

    3. Vue.component(Popup.name, Popup);

    例子

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

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

     

    2. v-model="popupVisible"

    3. position="bottom">

    4. ...

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

     

    2. v-model="popupVisible"

    3. popup-transition="popup-fade">

    4. ...

    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

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

    引入

     

    1. import { Swipe, SwipeItem } from 'mint-ui';

    2.  

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

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

    例子

    基础用法

     

    2. 1

    3. 2

    4. 3

    隐藏 indicators

     

    2. 1

    3. 2

    4. 3

    取消自动播放

     

    2. 1

    3. 2

    4. 3

    change 事件

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

     

    2. 1

    3. 2

    4. 3

     

    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

    图片懒加载指令。

    引入

     

    1. import { Lazyload } from 'mint-ui';

    2.  

    3. Vue.use(Lazyload);

    例子

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

     

    image[lazy=loading] {
      width: 40px;
      height: 300px;
      margin: auto;
    }

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

     

     

         

           

         

       

     

     

    Range

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

    引入

     

    1. import { Range } from 'mint-ui';

    2.  

    3. Vue.component(Range.name, Range);

    例子

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

    更多的配置项

     

    2. v-model="rangeValue"

    3. :min="10"

    4. :max="90"

    5. :step="10"

    6. :bar-height="5">

    可在滑块两侧显示文字

     

    2. 0

    3. 100

    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

    进度条。

    引入

     

    1. import { Progress } from 'mint-ui';

    2.  

    3. Vue.component(Progress.name, Progress);

    例子

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

    可在进度条两侧显示文字

     

    2. 0%

    3. 100%

    API

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

    Slot

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

    Picker

    选择器，支持多 slot 联动。

    引入

     

    1. import { Picker } from 'mint-ui';

    2.  

    3. Vue.component(Picker.name, Picker);

    例子

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

     

    1. export default {

    2. methods: {

    3. onValuesChange(picker, values) {

    4. if (values[0] > values[1]) {

    5. picker.setSlotValue(1, values[0]);

    6. }

    7. }

    8. },

    9. data() {

    10. return {

    11. slots: [

    12. {

    13. flex: 1,

    14. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    15. className: 'slot1',

    16. textAlign: 'right'

    17. }, {

    18. divider: true,

    19. content: '-',

    20. className: 'slot2'

    21. }, {

    22. flex: 1,

    23. values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],

    24. className: 'slot3',

    25. textAlign: 'left'

    26. }

    27. ]

    28. };

    29. }

    30. };

    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

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

    引入

     

    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，分别用于打开和关闭选择器。

     

    2.  

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

     

    2. v-model="pickerVisible"

    3. type="date"

    4. year-format="{value} 年"

    5. month-format="{value} 月"

    6. date-format="{value} 日">

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

     

    2. v-model="pickerVisible"

    3. type="time"

    4. @confirm="handleConfirm">

    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

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

    引入

     

    1. import { IndexList, IndexSection } from 'mint-ui';

    2.  

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

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

    例子

     

    11. ...

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

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

     

    2. ...

    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 的内容

     

    调色板按钮

    引入

     

    1. import { PaletteButton } from 'mint-ui';

    2.  

    3. Vue.component(PaletteButton.name, PaletteButton);

    例子

    基本用法

     

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

     

    1. methods: {

    2. main_log(val) {

    3. console.log('main_log', val);

    4. },

    5. sub_log(val) {

    6. console.log('sub_log', val);

    7. this.$refs.target_1.collapse();

    8. }

    9. }

     

    2. direction="rt" class="pb" :radius="80" ref="target_1" mainButtonStyle="color:#fff;background-color:#26a2ff;"

    3. style="left:30px;">

    选项

    参数 说明 类型 可选值 默认值
    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

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

    引入

     

    1. import { Header } from 'mint-ui';

    2.  

    3. Vue.component(Header.name, Header);

    例子

    固定在页面顶部

    设置 left 或 right slot

     

    3. 返回

    设置多个按钮

     

    3. 返回

    4. 关闭

    API

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

    Slot

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

     

    Tabbar

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

    引入

     

    1. import { Tabbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    4. 外卖

    8. 订单

    12. 发现

    16. 我的

    API

    tabbar

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

    tab-item

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

    Slot

    tabbar

    name 描述
    - 内容

    tab-item

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

     

    Navbar

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

    引入

     

    1. import { Navbar, TabItem } from 'mint-ui';

    2.  

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

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

    例子

    搭配 tab-container 组件使用

     

    2. 选项一

    3. 选项二

    4. 选项三

    5.  

    API

    navbar

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

    tab-item

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

    Slot

    navbar

    name 描述
    - 内容

    tab-item

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

     

    Button

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

    引入

     

    1. import { Button } from 'mint-ui';

    2.  

    3. Vue.component(Button.name, Button);

    例子

    改变颜色

    defaultprimarydanger

    改变大小

    smalllargenormal

    禁用按钮

    disabled

    幽灵按钮

    plain

    带图标

    back更多

    自定义图标

     

    3. 带自定义图标

    绑定 click 事件

    点击触发 handleClick

    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

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

    引入

     

    1. import { Cell } from 'mint-ui';

    2.  

    3. Vue.component(Cell.name, Cell);

    例子

    基础用法

    可点击的链接

     

    2. title="标题文字"

    3. to="//github.com"

    4. is-link

    5. value="带链接">

    带图标

    带自定义图标

     

    2. icon 是图片

    自定义内容

     

    2. 这里是元素

    带备注信息

    API

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

    Slot

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

    Cell Swipe

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

    引入

     

    1. import { CellSwipe } from 'mint-ui';

    2.  

    3. Vue.component(CellSwipe.name, CellSwipe);

    例子

    增加右滑动按钮

     

    2. title="标题文字"

    3. :right="[

    4. {

    5. content: 'Delete',

    6. style: { background: 'red', color: '#fff' },

    7. handler: () => this.$messagebox('delete')

    8. }

    9. ]">

    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

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

    引入

     

    1. import { Spinner } from 'mint-ui';

    2.  

    3. Vue.component(Spinner.name, Spinner);

    例子

    指定类型

     

    2.  

    指定颜色

    指定尺寸

    API

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

    tab-container

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

    引入

     

    1. import { TabContainer, TabContainerItem } from 'mint-ui';

    2.  

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

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

    例子

    改变 ative 的值，与  的 id 一致即显示对应页面。

     

    API

    tab-container

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

    tab-container-item

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

    Slot

    tab-container

    name 描述
    - 内容

    tab-container-item

    name 描述
    - 内容

    Search

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

    引入

     

    1. import { Search } from 'mint-ui';

    2.  

    3. Vue.component(Search.name, Search);

    例子

    基础用法

    设置显示文字

     

    2. v-model="value"

    3. cancel-text="取消"

    4. placeholder="搜索">

    带搜索结果

    自定义搜索结果

     

    3. v-for="item in result"

    4. :title="item.title"

    5. :value="item.value">

    API

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

    Slot

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

     

    Switch

    开关。

    引入

     

    1. import { Switch } from 'mint-ui';

    2.  

    3. Vue.component(Switch.name, Switch);

    例子

    带显示内容

    开关

    API

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

    Event

    名称 返回值
    change checked: Boolean

    Slot

    name 描述
    - 显示内容

     

    Checklist

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

    引入

     

    1. import { Checklist } from 'mint-ui';

    2.  

    3. Vue.component(Checklist.name, Checklist);

    例子

    基本用法

     

    2. title="复选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选中禁用',

    9. value: '选中禁用的值',

    10. disabled: true

    11. },

    12. {

    13. label: '选项A',

    14. value: '值A'

    15. },

    16. {

    17. label: '选项B',

    18. value: '值B'

    19. }

    20. ];

     

    2. v-model="value"

    3. :options="options">

    设置最大可选数

     

    2. :max="2"

    3. v-model="value"

    4. :options="options">

    选择框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

     

    Radio

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

    引入

     

    1. import { Radio } from 'mint-ui';

    2.  

    3. Vue.component(Radio.name, Radio);

    例子

    基本用法

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="['选项A', '选项B', '选项C']">

    设置禁用选项

     

    1. this.options = [

    2. {

    3. label: '被禁用',

    4. value: '值F',

    5. disabled: true

    6. },

    7. {

    8. label: '选项A',

    9. value: '值A'

    10. },

    11. {

    12. label: '选项B',

    13. value: '值B'

    14. }

    15. ];

     

    2. title="单选框列表"

    3. v-model="value"

    4. :options="options">

    单选框右对齐

     

    2. align="right"

    3. title="右对齐"

    4. v-model="value"

    5. :options="options">

    API

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

    Field

    表单编辑器。

    引入

     

    1. import { Field } from 'mint-ui';

    2.  

    3. Vue.component(Field.name, 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

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

    引入

     

    1. import { Badge } from 'mint-ui';

    2.  

    3. Vue.component(Badge.name, Badge);

    例子

    指定尺寸

    301010

    指定类型

    30101010

    指定颜色

    自定义颜色

    API

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

    Slot

    name 描述
    - 显示内容

    你可能感兴趣的:(vue知识记录)

    • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
      重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • MongoDB Oplog 窗口 喝醉酒的小白 MongoDB运维
      在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
    • 烟花美，但瞬间即逝的样子像极了爱情。 胡萝卜很甜
      我见过烟花在天上绽放时绚烂的模样也目睹过爱情消逝曾经相爱的两人变冷漠的样子其实我特别喜欢烟花绽放的艳丽大年初一凌晨的烟花手机拍的没有眼睛看到的美但是烟花虽美，稍纵即逝，眼睛刚记录下它的美好，就转眼消失不见。天空又恢复一片黑。烟花的样子像极了爱情啊……不论曾经多么山盟海誓，海枯石烂。只要吵架或者分手。就变得那么冷漠，那么陌生。你甚至开始怀疑你有过爱情么？真正的爱情到底是什么样子。来的快去的也快么？对
    • 01-Git初识 Meereen Gitgit
      01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
    • 摩托车加装车载手机充电usb方案/雅马哈USB充电方案开发 诚芯微科技 社交电子
      长途骑行需要给手机与行车记录仪等设备供电，那么，加装USB充电器就相继在两轮电动车上应用起来了。摩托车加装usb充电方案主要应用于汽车、电动自行车、摩托车、房车、渡轮、游艇等交通工具。提供电动车USB充电器方案/摩托车加装usb充电方案/渡轮加装usb充电方案/游艇加装usb充电方案开发。摩托车加装车载手机充电usb方案、汽车游艇改装四孔面板装双USB车充点烟器5V/4A电动车USB充电器输入4.
    • 读《人间鲁迅》有感 琳语读书
      上周读完《闻一多传》后，我对中国近代知识分子产生了兴趣，这周继续读了《人间鲁迅》。厚厚的两本书，记录了一个人的一生，苦痛，彷徨和挣扎，虽然只读了一小部分，却也心潮澎湃。闻一多和鲁迅是完全不同的。鲁迅是沉郁的，现实的，寂寞的，抗争的。除了天生性格的不同外，环境的塑造也是非常之大。鲁迅少年经历了家庭的变故，看尽了人间冷暖，世态炎凉。这种经历促使他很早就观察思考人生，立志用文学来改变中国国民的劣根。闻一
    • 钟表可以回到起点却已不是昨天 凉小夏
      人生的路很长，但是我们只能前进不能后退就像钟表，可以回到起点，却已时过境迁，永远也找不到那个过去的昨天。因我们总是会对过去有着很多留恋不舍和怀念，会时常回头看看走过的脚印，时常想起过去的美好时光，时常想到那些悲伤和不如意。今天的到来时钟不可阻止，历史的记录，原人生最宝贵的不是金钱，不是地位，而是时间。拥有时间就等于拥有一切，因为拥有时间，我们不怕囊中羞涩，因为拥有时间我们不惮创业无门，因为拥有时间
    • 【从浅识到熟知Linux】Linux发展史 Jammingpro 从浅学到熟知Linuxlinux运维服务器
      归属专栏：从浅学到熟知Linux个人主页：Jammingpro每日努力一点点，技术变化看得见文章前言：本篇文章记录Linux发展的历史，因在介绍Linux过程中涉及的其他操作系统及人物，本文对相关内容也有所介绍。文章目录Unix发展史Linux发展史开源Linux官网企业应用情况发行版本在学习Linux前，我们可能都会问Linux从哪里来？它是如何发展的。但在介绍Linux之前，需要先介绍一下Un
    • 骑昆明到北海—119 砚山县 61清风i
      从十年前第一次长途骑行青海湖开始每年一次长途骑行看风景，尝各地美食，探访异域文化，记录途中美食美景美事，已逐渐形成习惯。每年春季详细规划好线路，夏季出行，2020年因为疫情迟迟不能确定线路和行程。总算到了暑期疫情逐渐消失，规划了50多天的云南昆明—广西北海计划。本次行程从云南昆明出发到广西北海市结束，五十一天骑行二千多公里线路昆明-官渡古镇-环滇池--澄江市一抚仙湖—路居镇--江川区--通海县—龙
    • Linux查看服务器日志 TPBoreas 运维linux运维
      一、tail这个是我最常用的一种查看方式用法如下：tail-n10test.log查询日志尾部最后10行的日志;tail-n+10test.log查询10行之后的所有日志;tail-fn10test.log循环实时查看最后1000行记录(最常用的)一般还会配合着grep用，(实时抓包)例如:tail-fn1000test.log|grep'关键字'（动态抓包）tail-fn1000test.log
    • SpringCloudAlibaba—Sentinel(限流) 菜鸟爪哇
      前言：自己在学习过程的记录，借鉴别人文章，记录自己实现的步骤。借鉴文章：https://blog.csdn.net/u014494148/article/details/105484410Sentinel介绍Sentinel诞生于阿里巴巴，其主要目标是流量控制和服务熔断。Sentinel是通过限制并发线程的数量（即信号隔离）来减少不稳定资源的影响，而不是使用线程池，省去了线程切换的性能开销。当资源
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
      背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
    • 【Bugs】Python：“ModuleNotFoundError: No module named ‘XXX‘” 系'辞 工具箱pythonbuganaconda
      问题描述Python使用库的前提是必须已安装了相应的库，往往利用“命令行指令”实现安装，一般安装解法类似。但，还是具有延伸问题，本博客对此作记录。【1】Nomodulenamed‘seaborn’(1.1):情况1：为Anaconda安装【图1-2】.定位Anaconda路径【图3】.Anaconda路径加入Path>&
    • 项目：事半功倍的法宝 小小效能
      行动的三大流程：记录、排程和执行，也讲了易效能的4D原则以及T-step标签法。这些流程和方法能够解决我们眼前的一地鸡毛，让我们有更多时间和精力去关注更为长远的事情，完成工作、生活和人生中重要的项目。项目管理能够让我们围绕结果去做事情，达成事半功倍的效果，也就是做更少的事情，但达成更好的效果。如果我们能够不断地达成一个又一个的项目，那么我们的人生无疑会像滚雪球一样，在长坡道上面不断积累。一、项目的
    • [Unity]在场景中随机生成不同位置且不重叠的物体 Bartender_Jill Graphics图形学笔记unity游戏引擎动画
      1.前言最近任务需要用到Unity在场景中随机生成物体，且这些物体不能重叠，简单记录一下。参考资料:Howtoensurethatspawnedtargetsdonotoverlap?2.结果与代码结果如下所示：代码如下所示：usingSystem.Collections.Generic;usingUnityEngine;namespaceAssets.Scripts{publicclassNew
    • 记录幸福（三月） 杨芸
      3月6日中午，匆匆忙忙与老爸和三妹在高铁站候车厅见了一面，两个南瓜包传递了亲人间的爱，那一刻好幸福好满足。他们进站后，我带着离别的忧伤，走到出口，突然想起朵儿喜欢吃的奥尔良鸡腿煲，便折回去，买了她和我，还有朵爸各自喜爱的。以前和亲人每次分开，都要难过许久，那天我竟然突然明白了一个道理，正因为爱家人，所以要让自己过的更开心更舒适，才能长寿，有更多的时间去爱他们。而不是忧心忡忡的过日子哦。最爱的家人回
    • 2022-1-12晨间日记 云卷云舒_a1b9
      起床：6：20就寝：23：00天气：阴心情：还好纪念日：法考主观体出分的日子叫我起床的不是闹钟是梦想年度目标及关键点：备考初级会计师；坚持运动，减重，阅读，学习本月重要成果：报名今日三只青蛙/番茄钟学习听课；瑜伽课；记账盘点成功日志-记录三五件有收获的事务1.收到鲜花2.早起做早餐3.引导孩子做计划财务检视支出严重超预算，检视一月的预算是否合理人际的投入同学联系；开卷有益-学习/读书/听书听初级课
    • 进销存小程序源码 PHP网络版ERP进销存管理系统 全开源可二开 摸鱼小号 php
      可直接源码搭建部署发布后使用：一、功能模块介绍该系统模板主要有进，销，存三个主要模板功能组成，下面将介绍各模块所对应的功能；进：需要将产品采购入库，自动生成采购明细台账同时关联财务生成付款账单；销：是指对客户的销售订单记录，汇总生成产品销售明细及回款计划；存：库存的日常盘点与统计，库存下限预警、出入库台账、库存位置等。1.进购管理采购订单：采购下单审批→由上级审批通过采购入库；采购入库：货品到货>
    • 如何利用大数据与AI技术革新相亲交友体验 h17711347205 回归算法安全系统架构交友小程序
      在数字化时代，大数据和人工智能（AI）技术正逐渐革新相亲交友体验，为寻找爱情的过程带来前所未有的变革（编辑h17711347205）。通过精准分析和智能匹配，这些技术能够极大地提高相亲交友系统的效率和用户体验。大数据的力量大数据技术能够收集和分析用户的行为模式、偏好和互动数据，为相亲交友系统提供丰富的信息资源。通过分析用户的搜索历史、浏览记录和点击行为，系统能够深入了解用户的兴趣和需求，从而提供更
    • 2021-09-10 彧瑛
      [cp]九月果香，九月菊黄，九月忽然想起，是谁在播撒着希望？九月我们收集阳光，九月我们深情歌唱，一个感动的季节，被求知的眼睛珍藏。一寸一寸的粉笔，染白您的头发，腾然而起点燃成烛，照亮别人，让后来者攀上崖顶，让后来者踏着你的双肩，送一批批学子上路。黑发积霜织日月，粉笔无言写春秋。这就是老师的一生一一人类灵魂工程师的真实写照。粉笔里飞舞着您的万千情丝，书写着您的青春岁月；教室里定格着您的音容笑貌，记录
    • 【日记】2023.10.31十月 冰瑗
      不知不觉，十月走到了尾声，从灿烂的阳光走向了灿烂的落叶。以前我看日历，总会觉得一个月的时间很快就会过去，在日历上短短的四行数字，是呼吸间就能读完的几行，可是真正经历过后，才蓦然发觉，似乎太多事情的堆叠，让我觉得像是过了很久。十一回家的路途还历历在目，辗转在火车站里的凌晨，和到达沈阳站看到的破晓的霞光，在今夜都让我觉得恍若隔世。翻看之前记录的有关十月的日记，有很多都是心情的起伏，其实每一天还是平静悠
    • 童年的回忆 酷心梦
      小时候总盼望着赶快长大，长大后却开始怀念童年，时光不可复返，回忆却很温暖，跟着脑海的记忆，向童年问个好，向童年致敬，记录着童年的美好时光吧。大宝泡泡糖大宝泡泡糖，嚼一嚼，向外吹出大泡泡，向内吹出大泡泡，不管吹出的是大还是小，内心都无比满足，无比得意，还有朋友为自己喝彩。对了，买大宝泡泡，还可以贴图案，不过当时真不理解大人们总说这个不好？图片发自App这个牛奶小布丁，夏天能吃上它真是无比幸福啊！超级
    • 写作，让我静心反思与总结 薛森森的猫
      坚持日更很开心。我可以把生活中的点滴感悟记录下来。慢慢总结，也顺带可以反思自己的人生。写作也锻炼了我的思维逻辑。生活给予我写作的灵感，而写作大纲让我写作更调理。当然还需要改进自己。欠缺的地方：读书少，积累更少。原创图片少。要上班了，继续努力！
    • Redis 有哪些危险命令？如何防范？ 花小疯 redis缓存数据库危险命令大数据
      Redis有哪些危险命令？Redis的危险命令主要有以下几个：1.keys客户端可查询出所有存在的键。2.flushdb删除Redis中当前所在数据库中的所有记录，并且此命令从不会执行失败。3.flushall删除Redis中所有数据库中的所有记录，不止是当前所在数据库，并且此命令从不会执行失败。4.config客户端可修改Redis配置。怎么禁用和重命名危险命令？看下redis.conf默认配置
    • 鲲鹏 ARM 架构 麒麟 Lylin v10 安装 Nginx (离线) 焚木灵 arm开发架构nginx服务器
      最近做一个银行的项目，银行的服务器是鲲鹏ARM架构的服务器，并且是麒麟v10的系统，这里记录一下在无法访问外网安装Nginx的方法。其他文章：鲲鹏ARM架构麒麟Lylinv10安装Mysql8.3(离线)-CSDN博客鲲鹏ARM架构麒麟Lylinv10安装Node和NVM(离线)-CSDN博客鲲鹏ARM架构麒麟Lylinv10安装Pm2(离线)-CSDN博客鲲鹏ARM架构麒麟Lylinv10安装P
    • shell脚本中sed命令如何使用变量 歪歪的酒壶 linux
      在shell脚本中我们常常需要使用sed命令进行配置文件的更新，但是更新的内容又往往根据环境相关。值并不是固定的。这里我们介绍一种在sed命令中使用变量的方法。比如，在nginx的配置中，我们需要根据环境来更新/etc/nginx/sites-available/default中的目录配置。通常我们采用一个变量，来记录当前环境需要配置的目录比如：dist_dir=/home/dev/code/ui
    • 十一今日套圈，神了 二十八亩甜
      10//8℃阴腊月二十三今天是老妈的生日，醒来第一件事就是给老妈发生日红包，顺便看看前几天买的生日礼物到没，结果要明天老爸过生才能收到，还好给二老都买了，要不我爸以为只有我妈的，会吃醋的，哈哈哈哈。让十一给外婆说生日快乐，十一依然不会说。今天的十一还是有记录的点。和多多姐姐一起玩反斗乐园，看到姐姐一进来就和姐姐来了个大大的拥抱，后来还和一个刚学会走路的妹妹也来了个大大拥抱，结果两小只直接抱到侧翻了
    • 小学科学课堂管理规培有感 31c6a3d23d4e
      今天进行了这学期的第一次新教师规培，又是干货满满的一次学习，两位有经验的老教师分享了自己很多年来有关科学教学的经验。苏老师的语言风趣幽默，通过他的课堂管理规则，懂得了语言的艺术。艳姐分享的培养小助手，对我的帮助很多，小组长，（做记录、整理材料、管理卫生）。既培养了学生，又减轻老师的工作量，还有评价表，学起来学起来！
    • 用MiddleGenIDE工具生成hibernate的POJO（根据数据表生成POJO类） AdyZhang POJOeclipseHibernateMiddleGenIDE
      推荐:MiddlegenIDE插件,   是一个Eclipse   插件.     用它可以直接连接到数据库,   根据表按照一定的HIBERNATE规则作出BEAN和对应的XML ，用完后你可以手动删除它加载的JAR包和XML文件!     今天开始试着使用
    • .9.png Cb123456 android
        “点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png 　　智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。 　　我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边
    • 算法的效率 天子之骄 算法效率复杂度最坏情况运行时间大O阶平均情况运行时间
      算法的效率 效率是速度和空间消耗的度量。集中考虑程序的速度，也称运行时间或执行时间，用复杂度的阶(O)这一标准来衡量。空间的消耗或需求也可以用大O表示，而且它总是小于或等于时间需求。   以下是我的学习笔记：   1.求值与霍纳法则，即为秦九韶公式。   2.测定运行时间的最可靠方法是计数对运行时间有贡献的基本操作的执行次数。运行时间与这个计数成正比。
    • java数据结构 何必如此 java数据结构
      Java 数据结构 Java工具包提供了强大的数据结构。在Java中的数据结构主要包括以下几种接口和类： 枚举（Enumeration） 位集合（BitSet） 向量（Vector） 栈（Stack） 字典（Dictionary） 哈希表（Hashtable） 属性（Properties） 以上这些类是传统遗留的，在Java2中引入了一种新的框架-集合框架(Collect
    • MybatisHelloWorld 3213213333332132
      //测试入口TestMyBatis package com.base.helloworld.test; import java.io.IOException; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibat
    • Java|urlrewrite|URL重写|多个参数 7454103 javaxmlWeb工作
       个人工作经验！ 如有不当之处，敬请指点 1.0  web -info 目录下建立     urlrewrite.xml  文件 类似如下： <?xml version="1.0" encoding="UTF-8" ?>   <!DOCTYPE u
    • 达梦数据库+ibatis darkranger sqlmysqlibatisSQL Server
      --插入数据方面 如果您需要数据库自增... 那么在插入的时候不需要指定自增列. 如果想自己指定ID列的值, 那么要设置 set identity_insert  数据库名.模式名.表名; ----然后插入数据; example: create table zhabei.test( id bigint identity(1,1) primary key, nam
    • XML 解析 四种方式 aijuans android
      XML现在已经成为一种通用的数据交换格式,平台的无关性使得很多场合都需要用到XML。本文将详细介绍用Java解析XML的四种方法。 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM(Document Object
    • spring中配置文件占位符的使用 avords
      1.类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.o
    • 前端工程化-公共模块的依赖和常用的工作流 bee1314 webpack
      题记： 一个人的项目，还有工程化的问题嘛？   我们在推进模块化和组件化的过程中，肯定会不断的沉淀出我们项目的模块和组件。对于这些沉淀出的模块和组件怎么管理？另外怎么依赖也是个问题？ 你真的想这样嘛？   var BreadCrumb = require(‘../../../../uikit/breadcrumb’); //真心ugly。  
    • 上司说「看你每天准时下班就知道你工作量不饱和」，该如何回应？ bijian1013 项目管理沟通IT职业规划
      问题：上司说「看你每天准时下班就知道你工作量不饱和」，如何回应         正常下班时间6点，只要是6点半前下班的，上司都认为没有加班。   Eno-Bea回答，注重感受，不一定是别人的         虽然我不知道你具体从事什么工作与职业，但是我大概猜测，你是从事一项不太容易出现阶段性成果的工作
    • TortoiseSVN，过滤文件 征客丶 SVN
      环境： TortoiseSVN 1.8 配置： 在文件夹空白处右键 选择  TortoiseSVN -> Settings 在 Global ignote pattern 中添加要过滤的文件： 多类型用英文空格分开 *name ： 过滤所有名称为 name 的文件或文件夹 *.name ： 过滤所有后缀为 name 的文件或文件夹 --------
    • 【Flume二】HDFS sink细说 bit1129 Flume
      1. Flume配置   a1.sources=r1 a1.channels=c1 a1.sinks=k1 ###Flume负责启动44444端口 a1.sources.r1.type=avro a1.sources.r1.bind=0.0.0.0 a1.sources.r1.port=44444 a1.sources.r1.chan
    • The Eight Myths of Erlang Performance bookjovi erlang
      erlang有一篇guide很有意思： http://www.erlang.org/doc/efficiency_guide 里面有个The Eight Myths of Erlang Performance： http://www.erlang.org/doc/efficiency_guide/myths.html   Myth: Funs are sl
    • java多线程网络传输文件(非同步)-2008-08-17 ljy325 java多线程socket
      利用 Socket 套接字进行面向连接通信的编程。客户端读取本地文件并发送；服务器接收文件并保存到本地文件系统中。 使用说明:请将TransferClient, TransferServer, TempFile三个类编译，他们的类包是FileServer. 客户端: 修改TransferClient: serPort, serIP, filePath, blockNum,的值来符合您机器的系
    • 读《研磨设计模式》-代码笔记-模板方法模式 bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet;
    • 配置心得 chenyu19891124 配置
      时间就这样不知不觉的走过了一个春夏秋冬，转眼间来公司已经一年了，感觉时间过的很快，时间老人总是这样不停走，从来没停歇过。 作为一名新手的配置管理员，刚开始真的是对配置管理是一点不懂，就只听说咱们公司配置主要是负责升级，而具体该怎么做却一点都不了解。经过老员工的一点点讲解，慢慢的对配置有了初步了解，对自己所在的岗位也慢慢的了解。 做了一年的配置管理给自总结下： 1.改变 从一个以前对配置毫无
    • 对“带条件选择的并行汇聚路由问题”的再思考 comsci 算法工作软件测试嵌入式领域模型
      2008年上半年，我在设计并开发基于”JWFD流程系统“的商业化改进型引擎的时候，由于采用了新的嵌入式公式模块而导致出现“带条件选择的并行汇聚路由问题”(请参考2009-02-27博文)，当时对这个问题的解决办法是采用基于拓扑结构的处理思想，对汇聚点的实际前驱分支节点通过算法预测出来，然后进行处理，简单的说就是找到造成这个汇聚模型的分支起点，对这个起始分支节点实际走的路径数进行计算，然后把这个实际
    • Oracle 10g 的clusterware 32位 下载地址 daizj oracle
      Oracle 10g 的clusterware 32位 下载地址 http://pan.baidu.com/share/link?shareid=531580&uk=421021908 http://pan.baidu.com/share/link?shareid=137223&uk=321552738 http://pan.baidu.com/share/l
    • 非常好的介绍：Linux定时执行工具cron dongwei_6688 linux
      Linux经过十多年的发展，很多用户都很了解Linux了，这里介绍一下Linux下cron的理解，和大家讨论讨论。cron是一个Linux 定时执行工具，可以在无需人工干预的情况下运行作业，本文档不讲cron实现原理，主要讲一下Linux定时执行工具cron的具体使用及简单介绍。 新增调度任务推荐使用crontab -e命令添加自定义的任务（编辑的是/var/spool/cron下对应用户的cr
    • Yii assets目录生成及修改 dcj3sjt126com yii
      assets的作用是方便模块化，插件化的，一般来说出于安全原因不允许通过url访问protected下面的文件，但是我们又希望将module单独出来，所以需要使用发布，即将一个目录下的文件复制一份到assets下面方便通过url访问。 assets设置对应的方法位置 \framework\web\CAssetManager.php   assets配置方法 在m
    • mac工作软件推荐 dcj3sjt126com mac
      mac上的Terminal + bash ＋ screen组合现在已经非常好用了，但是还是经不起iterm＋zsh＋tmux的冲击。在同事的强烈推荐下，趁着升级mac系统的机会，顺便也切换到iterm＋zsh＋tmux的环境下了。 我为什么要要iterm2 切换过来也是脑袋一热的冲动，我也调查过一些资料，看了下iterm的一些优点： * 兼容性好，远程服务器 vi 什么的低版本能很好兼
    • Memcached(三)、封装Memcached和Ehcache frank1234 memcachedehcachespring ioc
      本文对Ehcache和Memcached进行了简单的封装，这样对于客户端程序无需了解ehcache和memcached的差异，仅需要配置缓存的Provider类就可以在二者之间进行切换，Provider实现类通过Spring IoC注入。 cache.xml <?xml version="1.0" encoding="UTF-8"?>
    • Remove Duplicates from Sorted List II hcx2013 remove
      Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numbers from the original list. For example,Given 1->2->3->3->4->4->5,
    • Spring4新特性——注解、脚本、任务、MVC等其他特性改进 jinnianshilongnian spring4
      Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
    • MySQL安装文档 liyong0802 mysql
        工作中用到的MySQL可能安装在两种操作系统中，即Windows系统和Linux系统。以Linux系统中情况居多。   安装在Windows系统时与其它Windows应用程序相同按照安装向导一直下一步就即，这里就不具体介绍，本文档只介绍Linux系统下MySQL的安装步骤。   Linux系统下安装MySQL分为三种：RPM包安装、二进制包安装和源码包安装。二
    • 使用VS2010构建HotSpot工程 p2p2500 HotSpotOpenJDKVS2010
      1. 下载OpenJDK7的源码：      http://download.java.net/openjdk/jdk7      http://download.java.net/openjdk/      2. 环境配置     ▶
    • Oracle实用功能之分组后列合并 seandeng888 oracle分组实用功能合并
      1       实例解析 由于业务需求需要对表中的数据进行分组后进行合并的处理，鉴于Oracle10g没有现成的函数实现该功能，且该功能如若用JAVA代码实现会比较复杂，因此，特将SQL语言的实现方式分享出来，希望对大家有所帮助。如下： 表test 数据如下： ID,SUBJECTCODE,DIMCODE,VALUE 1&nbs
    • Java定时任务注解方式实现 tuoni javaspringjvmxmljni
      Spring 注解的定时任务，有如下两种方式： 第一种： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans"  xmlns:xsi="http
    • 11大Java开源中文分词器的使用方法和分词效果对比 yangshangchuan word分词器ansj分词器Stanford分词器FudanNLP分词器HanLP分词器
      本文的目标有两个： 1、学会使用11大Java开源中文分词器 2、对比分析11大Java开源中文分词器的分词效果 本文给出了11大Java开源中文分词的使用方法以及分词结果对比代码，至于效果哪个好，那要用的人结合自己的应用场景自己来判断。 11大Java开源中文分词器，不同的分词器有不同的用法，定义的接口也不一样，我们先定义一个统一的接口： /** * 获取文本的所有分词结果, 对比
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他