vue 組件式開發swiper

最新推荐文章于 2024-09-13 21:48:09 发布

低調的D吖

最新推荐文章于 2024-09-13 21:48:09 发布

阅读量65

点赞数

分类专栏： js vue

本文链接：https://blog.csdn.net/software20121216/article/details/103455466

版权

vue 同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

29 篇文章 0 订阅

订阅专栏

必須要先安裝npm install vue-awesome-swiper

//組件
<template>
    <div class="my-swiper">
    <swiper :optops="swiperOption" class="swiper-menu">
      <swiper-slide><img src="~assets/img/home.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_1.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_3.png" alt=""/></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>
    </div>
  </div>
  
</template>


<script>

export default {
  name:'MySwiper',
  data(){
    return{
      swiperOption:{
        loop:true
      }
    }
  }
  
}
</script>

<style>
    .my-swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide img{
      overflow: hidden;
      width: 100%;
      height: 100%;;
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      /* display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex; */
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      padding: 3px;
      border-bottom: 1px solid #ffffff

    }

</style>

//父組件使用
<div class="home-view">
      <my-swiper></my-swiper>
      <feature class="feature"></feature>
    </div>   


import MySwiper from '../swiper/Swiper'

swiper作為組件應該是由父組件來控制是圖片還是其他控件，然後在基礎上進行封裝

//父組件 

 <swiper :optops="swiperOption" class="swiper-menu">
      <swiper-slide><img src="~assets/img/home.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_3.png" alt=""/></swiper-slide>
      <swiper-slide><img src="~assets/img/home_1.png" alt=""/></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
 </swiper>




//子組件，使用插槽方式，方便父子件安裝需求添加所需的控件

<swiper>
      <swiper-slide><slot></slot></swiper-slide>
      <swiper-slide><slot></slot></swiper-slide>
      <swiper-slide><slot></slot></swiper-slide>
      <div class="swiper-scrollbar" slot="scrollbar"></div>
    </swiper>