安装mint-ui
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
npm i mint-ui -S
引入mint-ui
完整引入
在 main.js 中写入以下内容:
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)
new Vue({
el: '#app',
components: { App }
})
以上代码便完成了 Mint UI 的引入。需要注意的是,样式文件需要单独引入。
按需引入(推荐)
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将.babelrc
(在babel.config.js中添加) 修改为:
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
Swipe – 轮播图
使用按需引入在mian.js文件下引入并注册组件swipe和swipeItem:
import { Swipe, SwipeItem } from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
注意需要引入css文件。
使用轮播图组件:
注意需要给mint-swipe设置高度,否则无法看到图片。
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 | 描述 |
---|---|
– | 单个轮播图的内容 |
版权声明:本文为weixin_46351593原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。