Vue Mint UI mt-swipe 的使用

Mint UI的安装使用

1、安装 npm install mint-ui -S
-S表示 --save

2、在main.js中引入mint Ui的css 和 插件 (全局引用)
import Mint from ‘mint-ui’;
import ‘mint-ui/lib/style.css’
Vue.use(Mint);

3、在main.js中引入mint Ui的css 和 插件 (按需引用,有的可能要按需引css)
import { Swipe, SwipeItem } from ‘mint-ui’;
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

(一)轮播图mt-swipe组件使用

<mt-swipe :auto="4000" @change="IMGChange" > 
//auto轮播时间  //轮播图切换时会触发 change 事件,参数为切入轮播图的索引  
//speed 动画持时(毫秒)  

  <mt-swipe-item v-for="item in bannerArr" :key="item.id">
     <img :src="item.img_url" alt="">
  </mt-swipe-item>
</mt-swipe>

IMGChange(index){  //参数为当前轮播图的索引 
	console.log(index)
}

在这里插入图片描述

原创文章 18 获赞 22 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_42618523/article/details/102800728