在vue中使用mint-ui轮播图的坑：图片上下排列，不能在一行内显示

1.安装

npm install mint-ui -S

2.main.js中引入

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

3.<style>导入css文件（坑：如果没有导入css文件，轮播图不能正常显示）

@import 'node_modules/mint-ui/lib/swipe/style.css'

注：路径根据项目文件目录决定

4.添加样式

 .mint-swipe {
    height: ;
}
//没有设置高度，图片不能显示。原因是组件的代码里开启了绝对定位，脱离了文档流，
如果父元素没有设置高度，就会导致高度塌陷

img{
    width: 100%;
    height: 100%;
}

5.基本使用

<mt-swipe :auto="4000">
  <mt-swipe-item><img src=""></mt-swipe-item>
  <mt-swipe-item><img src=""></mt-swipe-item>
  <mt-swipe-item><img src=""></mt-swipe-item>
</mt-swipe>

官网教程：mint-ui.github.io/docs/#/zh-c…