编写 是否 本地 onclick false right refs gin
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
- npm i mint-ui -S
目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
- <!-- 引入样式 -->
- <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
- <!-- 引入组件库 -->
- <script src="https://unpkg.com/mint-ui/lib/index.js">
- </script>
通过 CDN 的方式我们可以很容易地使用 Mint UI 写出一个 Hello world 页面。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <!-- 引入样式 -->
- <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
- </head>
- <body>
- <div id="app">
- <mt-button @click.native="handleClick">
- 按钮
- </mt-button>
- </div>
- </body>
- <!-- 先引入 Vue -->
- <script src="https://unpkg.com/vue/dist/vue.js">
- </script>
- <!-- 引入组件库 -->
- <script src="https://unpkg.com/mint-ui/lib/index.js">
- </script>
- <script>
- new Vue({
- el: '#app',
- methods: {
- handleClick: function() {
- this.$toast('Hello world ! ')
- }
- }
- })
- </script>
- </html>
如果是通过 npm 安装,并希望配合 webpack 使用,请阅读下一节:快速上手。
关于事件绑定
在 Vue 2.0 中,为自定义组件绑定原生事件必须使用
修饰符:
- .native
- <my-component @click.native="handleClick">
- Click Me
- </my-component>
从易用性的角度出发,我们对
组件进行了处理,使它可以监听
- Button
事件:
- click
但是对于其他组件,还是需要添加
- <mt-button @click="handleButtonClick">
- Click Me
- </mt-button>
修饰符。
- .native
本节将介绍如何在项目中使用 Mint UI。
- npm install -g vue-cli
- vue init webpack projectname
你可以引入整个 Mint UI,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Mint UI。
在 main.js 中写入以下内容:
- importVuefrom 'vue'importMintUIfrom 'mint-ui'import 'mint-ui/lib/style.css'importAppfrom './App.vue'Vue.use(MintUI)newVue({el:'#app',components: { App }
- })
以上代码便完成了 Mint UI 的引入。需要注意的是,样式文件需要单独引入。
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
- npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
- {"presets": [
- ["es2015", {"modules":false}]
- ],"plugins": [["component", [
- {"libraryName":"mint-ui","style":true}
- ]]]
- }
如果你只希望引入部分组件,比如 Button 和 Cell,那么需要在 main.js 中写入以下内容:
- import Vue from'vue'import {
- Button,
- Cell
- }
- from'mint - ui'import App from'. / App.vue'Vue.component(Button.name, Button) Vue.component(Cell.name, Cell)
- /* 或写为
- * Vue.use(Button)
- * Vue.use(Cell)
- */
- new Vue({
- el: '#app',
- components: {
- App
- }
- })
至此,一个基于 Vue 和 Mint UI 的开发环境已经搭建完毕,现在就可以编写代码了。启动开发模式:
- npm run dev
编译:
各个组件的使用方法请参阅它们各自的文档。
- npm run build
简短的消息提示框,支持自定义位置、持续时间和样式。
- import {
- Toast
- }
- from'mint - ui';
基本用法
- Toast('提示信息');
在调用
时传入一个对象即可配置更多选项
- Toast
- Toast({message:'提示',position:'bottom',duration: 5000
- });
若需在文字上方显示一个 icon 图标,可以将图标的类名作为
的值传给
- iconClass
(图标需自行准备)
- Toast
- Toast({message:'操作成功',iconClass:'icon icon-success'});
执行
方法会返回一个
- Toast
实例,每个实例都有
- Toast
方法,用于手动关闭
- close
- Toast
- letinstance = Toast('提示信息');
- setTimeout(() => {
- instance.close();
- }, 2000);
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
message | 文本内容 | String | ||
position | Toast 的位置 | String | 'top''bottom''middle' | 'middle' |
duration | 持续时间(毫秒),若为 -1 则不会自动关闭 | Number | 3000 | |
className | Toast 的类名。可以为其添加样式 | String | ||
iconClass | icon 图标的类名 | String |
下拉 / 上拉刷新,支持自定义 HTML 模板。
- import {
- Loadmore
- }
- from'mint - ui';
- Vue.component(Loadmore.name, Loadmore);
- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
- ref="loadmore">
- <ul>
- <li v-for="item in list">
- {{ item }}
- </li>
- </ul>
- </mt-loadmore>
以列表顶部的下拉刷新为例:按住列表,下拉一定距离(通过
配置)后释放,被指定为
- topDistance
的方法就会执行
- top-method
- loadTop() {
- ...// 加载更多数据
- this.$refs.loadmore.onTopLoaded();
- }
注意在这个方法的最后需要手动调用
的
- loadmore
事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。
- onTopLoaded
列表底部的上拉刷新与之类似
- loadBottom() {
- ...// 加载更多数据
- this.allLoaded =true;// 若数据已全部获取完毕
- this.$refs.loadmore.onBottomLoaded();
- }
唯一的区别是,当底部数据全部获取完毕时,可以将绑定到组件
属性的变量赋值为
- bottom-all-loaded
,这样
- true
就不会再次执行了。
- bottom-method
手指在屏幕上滑动的距离与组件实际移动的距离比值可以通过
参数配置,默认值为 2。
- distance-index
可以为列表顶部和底部的加载提示区域提供自定义的 HTML 模板
- <template>
- <mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange">
- <ul>
- <li v-for="item in list">
- {{ item }}
- </li>
- </ul>
- <div slot="top" class="mint-loadmore-top">
- <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">
- ↓
- </span>
- <span v-show="topStatus === 'loading'">
- Loading...
- </span>
- </div>
- </mt-loadmore>
- </template>
- <script>
- export
- default {
- data() {
- return {
- topStatus:
- '',
- // ...
- };
- },
- methods: {
- handleTopChange(status) {
- this.topStatus = status;
- },
- // ...
- },
- // ...
- };
- </script>
比如需要配置列表顶部的 HTML,则需要为自定义 HTML 模板的最外层标签设置
属性为
- slot
,类名为
- top
。当用户滑动组件时,组件会有以下几个状态:
- mint-loadmore-top
:组件已经被按下,但按下的距离未达到
- pull
,此时释放不会触发
- topDistance
,列表会回到初始位置
- top-method
:按下的距离不小于
- drop
,此时释放会触发
- topDistance
- top-method
:组件已被释放,
- loading
正在执行 每当组件的状态发生变化时,
- top-method
都会触发
- loadmore
方法,参数为组件目前的状态。因此可以像本例一样,使用一个
- top-status-change
方法来处理组件状态的变化。
- handleTopChange
在不使用自定义 HTML 模板的情况下,可以配置
本身自带的加载提示区域的文字。以列表顶部为例,对应于
- loadmore
的三个状态,可配置的属性依次为
- status
、
- topPullText
和
- topDropText
。与之对应的底部属性为
- topLoadingText
、
- bottomPullText
和
- bottomDropText
。
- bottomLoadingText
在初始化时会自动检测它的高度是否能够撑满其容器,如果不能则会调用
- loadmore
,直到撑满容器为止。如果不希望使用这一机制,可以将
- bottom-method
设为
- auto-fill
。
- false
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
autoFill | 若为真,会自动检测并撑满其容器 |
Boolean | true | |
distanceIndex | 手指移动与组件移动距离的比值 | Number | 2 | |
maxDistance | 组件可移动的最大距离(像素),若为 0 则不限制 | Number | 0 | |
topPullText | 为 时加载提示区域的文字 |
String | '下拉刷新' | |
topDropText | 为 时加载提示区域的文字 |
String | '释放更新' | |
topLoadingText | 为 时加载提示区域的文字 |
String | '加载中...' | |
topDistance | 触发 的下拉距离阈值(像素) |
Number | 70 | |
topMethod | 下拉刷新执行的方法 | Function | ||
bottomPullText | 为 时加载提示区域的文字 |
String | '上拉刷新' | |
bottomDropText | 为 时加载提示区域的文字 |
String | '释放更新' | |
bottomLoadingText | 为 时加载提示区域的文字 |
String | '加载中...' | |
bottomDistance | 触发 的上拉距离阈值(像素) |
Number | 70 | |
bottomMethod | 上拉刷新执行的方法 | Function | ||
bottomAllLoaded | 若为真,则 不会被再次触发 |
Boolean | false |
事件名称 | 说明 | 回调参数 |
---|---|---|
top-status-change | 组件顶部状态发生变化时的回调函数 | 组件顶部的新状态名 |
bottom-status-change | 组件底部状态发生变化时的回调函数 | 组件底部的新状态名 |
name | 描述 |
---|---|
- | 数据列表 |
top | 自定义顶部加载提示区域 HTML 模板 |
bottom | 自定义底部加载提示区域 HTML 模板 |
Infinite scroll
无限滚动指令。
- import {
- InfiniteScroll
- }
- from'mint - ui';
- Vue.use(InfiniteScroll);
为 HTML 元素添加
指令即可使用无限滚动。滚动该元素,当其底部与被滚动元素底部的距离小于给定的阈值(通过
- v-infinite-scroll
设置)时,绑定到
- infinite-scroll-distance
指令的方法就会被触发。
- v-infinite-scroll
- <ul
- v-infinite-scroll="loadMore"
- infinite-scroll-disabled="loading"
- infinite-scroll-distance="10">
- <li v-for="item in list">{{ item }}</li></ul>
- loadMore() {this.loading =true;
- setTimeout(() => {letlast =this.list[this.list.length - 1];for(leti = 1; i <= 10; i++) {this.list.push(last + i);
- }this.loading =false;
- }, 2500);
- }
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
infinite-scroll-disabled | 若为真,则无限滚动不会被触发 | Boolean | false | |
infinite-scroll-distance | 触发加载方法的滚动距离阈值(像素) | Number | 0 | |
infinite-scroll-immediate-check | 若为真,则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。 | Boolean | true | |
infinite-scroll-listen-for-event | 一个 event,被执行时会立即检查是否需要执行加载方法。 | Function |
Message box
弹出式提示框,有多种交互形式。
- import {
- MessageBox
- }
- from'mint - ui';
以标题与内容字符串为参数进行调用
- MessageBox('提示','操作成功');
或者传入一个对象
- MessageBox({title:'提示',message:'确定执行此操作?',showCancelButton:true});
此外,
还提供了
- MessageBox
、
- alert
和
- confirm
三个方法,它们都返回一个 Promise
- prompt
- MessageBox.alert(message, title);
- MessageBox.alert('操作成功').then(action => {
- ...
- });
- MessageBox.confirm(message, title);
- MessageBox.confirm('确定执行此操作?').then(action => {
- ...
- });
- MessageBox.prompt(message, title);
- MessageBox.prompt('请输入姓名').then(({
- value,
- action
- }) = >{...
- });
在 prompt 中,若用户点击了取消按钮,则 Promise 的状态会变为 rejected
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
操作表,从屏幕下方移入。
- import {
- Actionsheet
- }
- from'mint - ui';
- Vue.component(Actionsheet.name, Actionsheet);
属性绑定一个由对象组成的数组,每个对象有
- actions
和
- name
两个键,
- method
为菜单项的文本,
- name
为点击该菜单项的回调函数。
- method
将
绑定到一个本地变量,通过操作这个变量即可控制
- v-model
的显示与隐藏。
- actionsheet
- <mt-actionsheet
- :actions="actions"
- v-model="sheetVisible"></mt-actionsheet>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
actions | 菜单项数组 | Array | ||
cancelText | 取消按钮的文本。若设为空字符串,则不显示取消按钮 | String | '取消' | |
closeOnClickModal | 是否可以通过点击 modal 层来关闭
|
Boolean | true |
弹出框,可自定义内容。
- import {
- Popup
- }
- from'mint - ui';
- Vue.component(Popup.name, Popup);
属性指定了
- position
的位置。比如,
- popup
为'bottom' 时,
- position
会从屏幕下方移入,并最终固定在屏幕下方。移入 / 移出的动效会根据
- popup
的不同而自动改变,无需手动配置。
- position
将
绑定到一个本地变量,通过操作这个变量即可控制
- v-model
的显示与隐藏。
- popup
- <mt-popup
- v-model="popupVisible"
- position="bottom">...</mt-popup>
若省略
属性,则
- position
会相对于屏幕居中显示(若不想让其居中,可通过 CSS 对其重新定位)。此时建议将动效设置为
- popup
,这样在显示 / 隐藏时会有淡入 / 淡出效果。
- popup-fade
- <mt-popup
- v-model="popupVisible"
- popup-transition="popup-fade">...</mt-popup>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
position | 的位置。省略则居中显示 |
String | 'top''right''bottom''left' | |
pop-transition | 显示 / 隐藏时的动效,仅在省略 时可配置 |
String | 'popup-fade' | |
modal | 是否创建一个 modal 层 | Boolean | true | |
closeOnClickModal | 是否可以通过点击 modal 层来关闭
|
Boolean | true |
name | 描述 |
---|---|
- | 弹出框的内容 |
轮播图,可自定义轮播时间间隔、动画时长等。
- import {
- Swipe,
- SwipeItem
- }
- from'mint - ui';
- Vue.component(Swipe.name, Swipe);
- Vue.component(SwipeItem.name, SwipeItem);
基础用法
- <mt-swipe :auto="4000">
- <mt-swipe-item>
- 1
- </mt-swipe-item>
- <mt-swipe-item>
- 2
- </mt-swipe-item>
- <mt-swipe-item>
- 3
- </mt-swipe-item>
- </mt-swipe>
隐藏 indicators
- <mt-swipe :show-indicators="false">
- <mt-swipe-item>
- 1
- </mt-swipe-item>
- <mt-swipe-item>
- 2
- </mt-swipe-item>
- <mt-swipe-item>
- 3
- </mt-swipe-item>
- </mt-swipe>
取消自动播放
- <mt-swipe :auto="0">
- <mt-swipe-item>
- 1
- </mt-swipe-item>
- <mt-swipe-item>
- 2
- </mt-swipe-item>
- <mt-swipe-item>
- 3
- </mt-swipe-item>
- </mt-swipe>
事件
- change
轮播图切换时会触发
事件,参数为切入轮播图的索引
- change
- <mt-swipe @change="handleChange">
- <mt-swipe-item>
- 1
- </mt-swipe-item>
- <mt-swipe-item>
- 2
- </mt-swipe-item>
- <mt-swipe-item>
- 3
- </mt-swipe-item>
- </mt-swipe>
- methods: {
- handleChange(index) {
- ...
- }
- }
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
name | 描述 |
---|---|
- | 一个或多个 组件 |
name | 描述 |
---|---|
- | 单个轮播图的内容 |
图片懒加载指令。
- import {
- Lazyload
- }
- from'mint - ui';
- Vue.use(Lazyload);
为
元素添加
- img
指令,指令的值为图片的地址。同时需要设置图片在加载时的样式。
- v-lazy
- <ul>
- <li v-for="item in list">
- <img v-lazy="item">
- </li>
- </ul>
若列表不在 window 上滚动,则需要将被滚动元素的 id 属性以修饰符的形式传递给
- image[lazy=loading]{width: 40px;height: 300px;margin: auto;}
指
- v-lazy
滑块,支持自定义步长、区间等。
- import {
- Range
- }
- from'mint - ui';
- Vue.component(Range.name, Range);
将一个本地变量与
的
- range
属性同步即可实现双向绑定
- value
- <mt-range v-model="rangeValue">
- </mt-range>
更多的配置项
- <mt-range
- v-model="rangeValue"
- :min="10"
- :max="90"
- :step="10"
- :bar-height="5"></mt-range>
可在滑块两侧显示文字
- <mt-range v-model="rangeValue">
- <div slot="start">
- 0
- </div>
- <div slot="end">
- 100
- </div>
- </mt-range>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 滑块的值 | Number | ||
min | 最小值 | Number | 0 | |
max | 最大值 | Number | 100 | |
step | 步长 | Number | 1 | |
disabled | 是否禁用 | Boolean | false | |
barHeight | 滑槽的线宽(像素) | Number | 1 |
name | 描述 |
---|---|
start | 滑块左侧 DOM |
end | 滑块右侧 DOM |
进度条。
- import {
- Progress
- }
- from'mint - ui';
- Vue.component(Progress.name, Progress);
传入
作为进度条的值。可自定义它的线宽
- value
- <mt-progress :value="20" :bar-height="5">
- </mt-progress>
可在进度条两侧显示文字
- <mt-progress :value="60">
- <div slot="start">
- 0%
- </div>
- <div slot="end">
- 100%
- </div>
- </mt-progress>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 进度条的值(%) | Number | ||
barHeight | 进度条的线宽(像素) | Number | 1 |
name | 描述 |
---|---|
start | 进度条左侧 DOM |
end | 进度条右侧 DOM |
选择器,支持多 slot 联动。
- import {
- Picker
- }
- from'mint - ui';
- Vue.component(Picker.name, Picker);
传入
,当被选中的值发生变化时触发
- slots
事件。
- change
事件有两个参数,分别为当前
- change
的 vue 实例和各 slot 被选中的值组成的数组
- picker
- <mt-picker :slots="slots" @change="onValuesChange">
- </mt-picker>
- export
- default {
- methods:
- {
- onValuesChange(picker, values) {
- if (values[0] > values[1]) {
- picker.setSlotValue(1, values[0]);
- }
- }
- },
- data() {
- return {
- slots: [{
- flex: 1,
- values: ['2015 - 01', '2015 - 02', '2015 - 03', '2015 - 04', '2015 - 05', '2015 - 06'],
- className: 'slot1',
- textAlign: 'right'
- },
- {
- divider: true,
- content: ' - ',
- className: 'slot2'
- },
- {
- flex: 1,
- values: ['2015 - 01', '2015 - 02', '2015 - 03', '2015 - 04', '2015 - 05', '2015 - 06'],
- className: 'slot3',
- textAlign: 'left'
- }]
- };
- }
- };
事件
- change
在
事件中,可以使用注册到
- change
实例上的一些方法:
- picker
- slots
绑定到
属性的数组由对象组成,每个对象都对应一个 slot,它们有如下键名
- slots
key | 描述 |
---|---|
divider | 对应 slot 是否为分隔符 |
content | 分隔符 slot 的显示文本 |
values | 对应 slot 的备选值数组。若为对象数组,则需在 标签上设置 属性来指定显示的字段名 |
defaultIndex | 对应 slot 初始选中值,需传入其在 values 数组中的序号,默认为 0 |
textAlign | 对应 slot 的对齐方式 |
flex | 对应 slot CSS 的 flex 值 |
className | 对应 slot 的类名 |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
slots | slot 对象数组 | Array | [] | |
valueKey | 当 values 为对象数组时,作为文本显示在 Picker 中的对应字段的字段名 | String | '' | |
showToolbar | 是否在组件顶部显示一个 toolbar,内容自定义 | Boolean | false | |
visibleItemCount | slot 中可见备选值的个数 | Number | 5 | |
itemHeight | 每个 slot 的高度 | Number | 36 |
name | 描述 |
---|---|
- | 当 showToolbar 为 true 时,toolbar 中的内容 |
日期时间选择器,支持自定义类型。
- import {
- DatetimePicker
- }
- from'mint - ui';
- Vue.component(DatetimePicker.name, DatetimePicker);
属性为组件的绑定值。
- v-model
属性表示
- type
组件的类型,它有三个可能的值:
- datetime-picker
: 日期时间选择器,可选择年、月、日、时、分,
- datetime
值为一个
- value
对象
- Date
: 日期选择器,可选择年、月、日,
- date
值为一个
- value
对象
- Date
: 时间选择器,可选择时、分,
- time
值为一个格式为
- value
的字符串
- HH:mm
提供了两个供外部调用的方法:
- datetime-picker
和
- open
,分别用于打开和关闭选择器。
- close
- <template>
- <mt-datetime-picker
- ref="picker"
- type="time"
- v-model="pickerValue">
- </mt-datetime-picker></template>
- <script>
- export default{methods: {
- openPicker() {this.$refs.picker.open();
- }
- }
- };</script>
可以为选项提供自定义模板。模板须为一个包含了
的字符串,
- {value}
会被解析为相应选项的值。
- {value}
- <mt-datetime-picker
- v-model="pickerVisible"
- type="date"
- year-format="{value} 年"
- month-format="{value} 月"
- date-format="{value} 日"></mt-datetime-picker>
当点击确认按钮时会触发
事件,参数为当前 value 的值。
- confirm
- <mt-datetime-picker
- v-model="pickerVisible"
- type="time"
- @confirm="handleConfirm"></mt-datetime-picker>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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}' |
事件名称 | 说明 | 回调参数 |
---|---|---|
confirm | 点击确认按钮时的回调函数 | 目前的选择值 |
索引列表,可由右侧索引导航快速定位到相应的内容。
- import {
- IndexList,
- IndexSection
- }
- from'mint - ui';
- Vue.component(IndexList.name, IndexList);
- Vue.component(IndexSection.name, IndexSection);
来源: http://www.bubuko.com/infodetail-2086782.html