cube-ui组件实现轮播

1、下载组件cube-ui

　　npm i cube-ui

2、package.json添加代码

"transformModules": {
    "cube-ui": {
      "transform": "cube-ui/lib/${member}",
      "kebabCase": true,
      "style": {
        "ignore": [
          "create-api",
          "better-scroll",
          "locale"
        ]
      }
    }
  },

 3、webpack.base.conf.js文件添加代码

'cube-ui': 'cube-ui/lib'

代码实现

<div class="index-banner" style="width:92%;margin:auto;">
   <cube-slide ref="slide" :data="banner_list" :interval='timeSwitch'>
       <cube-slide-item v-for="(item, index) in banner_list" :key="index" @click.native="clickHandler(item, index)">
           <img :src="item.img">
       </cube-slide-item>
   </cube-slide>
</div>

<script>
    import Vue from 'vue'
    import {Slide} from 'cube-ui'
    Vue.use(Slide)//按需引入组件内容
    export default {
      name: 'HelloWorld',
      data () {
        return {
          timeSwitch: 5000,
          banner_list: [//后续可以换成接口请求
            {img:'../images/1.png'},
            {img:'../images/2.png'},
            {img:'../images/3.png'}
          ]
        }
      },   
    ｝ 
</script>

<style>
.hello{
  overflow-x: hidden;
}
.cube-slide, .cube-slide-group {
    position: relative;
    height: 100%;
    overflow: hidden;
}
.cube-slide-item>img {
    display: block;
    width: 100%;
    height: 100%;
}
.cube-slide-item {
    float: left;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
</style>