封装轮播图组件

父组件

<template>
  <div id="app">
    <!--first></first-->
    <banner :list="list"
            :looptime="looptime"
            :width="width"
            :height="height"
            :background="background"
            :color="color"
            :fontSize="fontSize"
            @prev="prev"
            @next="next"
            @change="changeBanner"
            @click="bannerClick">
    </banner>
    <!-- footer>Footer</footer -->
  </div>
</template>

<script>
import banner from './banner'
export default {
  name: 'App',
  data () {
    return {
      looptime: 4000, // 循环时间
      width: 400,
      height: 200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
      list: [
        {
          id: 1,
          text: '1',
          url: 'http1'
        },
        {
          id: 2,
          text: '2',
          url: 'http2'
        },
        {
          id: 3,
          text: '3',
          url: 'http3'
        },
        {
          id: 4,
          text: '4',
          url: 'http4'
        }
      ]
    }
  },
  created () {},
  methods: {
    // 点击下一页回调
    prev (index, list) {
      // console.log('我点击了上一页')
      // console.log(index)
      // console.table(list)
    },
    // 点击下一页回调
    next () {
      // console.log('我点击了下一页')
      // console.log(index)
      // console.table(list)
    },
    // 鼠标移入状态点回调
    changeBanner (index) {
      // console.log('我移入了鼠标状态点了')
      // console.log(index)
    },
    bannerClick (index, item) {
      // console.log('我点击了广告内容')
      // console.log(index)
      // console.table(item)
    }
  },
  computed: {},
  components: {
    banner
  }
}
</script>

<style lang="less" scoped>
// * {
//   margin: 0;
//   padding: 0;
//   font-family: '微软雅黑';
// }
// li {
//   list-style: none;
// }
// body {
//   padding: 100px 0;
// }
// header,
// footer {
//   position: fixed;
//   height: 100px;
//   width: 100%;
//   background: blue;
//   font-size: 30px;
//   color: #fff;
//   line-height: 100px;
//   text-align: center;
// }
// footer {
//   bottom: 0;
// }
// header {
//   top: 0;
// }
</style>

子组件