中文文件 找了好久才找到，適用於vue-awesome-swiper滑動元件

swiperOption: {
          height: 380,
          speed: 500,//切換速度
          watchOverflow: true, //當沒有足夠的slide切換時，例如只有1個slide（非loop），swiper會失效且隱藏導航等。預設不開啟這個功能。
          loop: true,//開啟迴圈模式
          slidesPerView: 1,
          spaceBetween: 30,
          preventClicksPropagation: true,//阻止click冒泡。拖動Swiper時阻止click事件。
          simulateTouch: false,//滑鼠模擬手機觸控。預設為true，Swiper接受滑鼠點選、拖動。
          pagination: {
            el: '.swiper-pagination',
          },
          on: {
            touchEnd: function (event) {
              //你的事件
            },
          }
        }
 

在data中定義swiperOption物件，使用v-bind繫結到

<template>
  <!--在此處新增渲染的內容-->
  <div class="swiper-box">
    <swiper :options="swiperOption" class="swiper">
      <!-- slides -->
      <swiper-slide class="swiper-slide" v-for="(item,index,key) in result" :key="key">
        <div class="item-img">
          <img :src="item.imgUrl" alt="" width="100%" height="100%">
          <div class="item-title">{{item.title}}</div>
          <div class="b"></div>
        </div>
        <div class="item-text">
          <p>{{item.text}}</p>
          <button class="item-btn" @click="clickItem($event,index)">檢視更多</button>
        </div>
      </swiper-slide>

    </swiper>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
  </div>
</template>
 

.swiper-box {
    width: 80%;
    height: 35rem;
    margin: 2rem auto;
    position: relative;
  }

  .swiper-box .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-box .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
  }

  .swiper .swiper-slide {
    background-color: #ffffff;
    box-shadow: 0.02rem 0.1rem 1.78rem 0.02rem rgba(0, 0, 0, 0.09);
  }

  .item-img {
    width: 100%;
    height: 17.5rem;
    position: relative;
  }

  .item-title {
    position: absolute;
    right: 2rem;
    bottom: 0.5rem;
    font-size: 1.7rem;
    color: #d3a359;
  }

  .b {
    background-color: #d3a359;
    width: 2rem;
    height: 0.2rem;
    position: absolute;
    right: 2rem;
    bottom: 0;
  }

  .item-text {
    width: 100%;
    height: 17.5rem;
    position: relative;
  }

  .item-text p {
    width: 80%;
    height: 15.5rem;
    margin: 0 auto;
    padding: 2rem 0 0;
    line-height: 2rem;
  }

  .item-btn {
    width: 7.5rem;
    height: 2.5rem;
    border-radius: 0.3rem;
    border: solid 0.1rem #d3a359;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4rem;
    margin: auto;
    font-size: 1.2rem;
    color: #d3a359;
  }