vue自定义封装swiper组件

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

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

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

components:{banner}

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

上面用到变量都在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',
        },
      ],