vue自定义封装swiper组件

1.在components 创建下组件swiper.vue文件

<template>
    <div class="banner" >
          <div class="box">
             <ul>
                  <li v-for="(item, index) in list" :key="index" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)"><img :src="item.url" alt=""></li>
              </ul>
              <div class="status">
                  <span v-for="(item, index) in list"  :key="index" :class="index === current ? 'active' : ''" 
                  @mouseenter="changeBanner(index)"
                  @mouseleave="startLoop"
                  >
              </span>
              </div>
              <div class="btn">
                  <span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop"><icon-svg icon-class="iconjiantou" /></span>
                  <span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop"><icon-svg icon-class="iconjiantou" /></span>
              </div> -->
          </div>
      </div>
</template>

<script>
import IconSvg from './icon-components.vue'
export default {
  components:{IconSvg},
  name: 'swiper',
  data() {
    return {
        current: 0, // 当前索引
        timerId: null, // 清除循环标记
        intStyle: {}
    }
  },
  props: [
      'list', 
      'looptime', 
      'height', 
      'width', 
      'background', 
      'color',
      'fontSize'
  ],
  mounted(){
  },
  methods: {
    getArticle () {
        this.$emit('getArticle', this.article)
    },
    // 鼠标移入状态圆点
    changeBanner (index) {
        this.$emit('change', this.current);
        this.stopLoop();
        this.current = index;
    },
    // 鼠标点击banner内容
    bannerClick (index, item) {
        this.$emit('click', index, item);
    },
    // 点击上一张按钮
    prev () {
        if(this.current > 0) {
            // 将对象列表对应的索引和整个对象传出去
            this.$emit('prev', this.current, this.list);
            this.current--;
        } else {
            this.$emit('prev', this.current, this.list);
            this.current = 3;
        }
    },
    // 点击下一张按钮
    next () {
        if(this.current < 3) {
            this.$emit('prev', this.current, this.list);
            this.current ++;
        } else {
            this.$emit('prev', this.current, this.list);
            this.current = 0;
        }
    },
    // 鼠标移出继续循环播放
    startLoop () {
        this.int(4000);
    },
    // 鼠标移入停止循环播放
    stopLoop () {
        clearTimeout(this.timerId); // 清除循环
    },
    // 初始化加载
    int (time){
        this.timerId = setInterval(()=> {
          this.next();
      }, time);
      // 初始化样式
      this.intStyle = {
        width: this.width + 'px',
        height: this.height + 'px',
        background: this.background,
        color: this.color
      }
    }
  },
  created () {
    this.int(4000);
  }
}
</script>
<style lang="stylus" scoped>
.banner{
    width:900px;
    height:434px;
    overflow:hidden;
    .box{
        position:relative;
        height:100%;
        ul{
            height:100%;
            margin 0
            li{
                position:absolute;
                left:0;
                width:100%;
                height:100%;
                font-size:inherit;
                color:#fff;
                font-size:80px;
                text-align:center;
                opacity:0;
                transition: all 1.5s;
                img{
                  width: 100%;
                  height: 100%;
                }
            }
            .active{
                opacity:1;
                transition: all 1.5s;
            }
        }
        .status{
            position:absolute;
            bottom:0;
            width:100%;
            height:40px;
            text-align:Center;
            span{
                display:inline-block;
                height:17px;
                width:17px;
                margin:0 5px;
                background:#fff;
                border-radius:10px;
                color:#333;
                cursor:pointer;
            }
            span.active{
                color:#fff;
                background:#db6f78;
            }
        }
    }
    .btn{
        position:absolute;
        top:50%;
        width:100%;
        transform: translateY(-50%);
        span{
            display:block;
            height:70px;
            width:58px;
            color:#fff;
            line-height:70px;
            text-align:Center;
            background:rgba(0,0,0, 0.3);
            cursor:pointer;
        }
        span.prev{
            float:left;
        }
        span.next{
            float:right;
        }
    }
}
</style>

2.在需要使用这个组件的页面 引入swiper组件

import banner from '../components/Swiper.vue';

components:{banner}

3.在需要使用swiper的位置写如下代码

      <banner
           :list="list"
           :looptime="looptime"
            width="width"
           :height="height"
           :background="background"
           :color="color"
           :fontSize="fontSize"
         >
     </banner>

上面用到变量都在data里定义赋值就可以了(vue2)(vue3写在return里面)

looptime: 4000, // 循环时间
      width: 400,
      height: 200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
  
      list: [
        {
          id: 1,
          text: '1',
          url:
            'http://CgEUe176rnSAbneHAAFYHWnAzQs453.jpg',
        },
        {
          id: 2,
          text: '2',
          url:
            'https://CgEhS17-ttSAbrC8AALhs6ZdoX8724.jpg',
        },
        {
          id: 3,
          text: '3',
          url:
            'https:CgEhTl78CHSAXCMhAAG3yt1ilmk722.jpg',
        },
        {
          id: 4,
          text: '4',
          url:
            'https://CgEhTl78CByAcsaMAAJqZ6Z2uIs537.jpg',
        },
      ],