1. 程式人生 > >2018.01.26.使用vue輪播圖元件

2018.01.26.使用vue輪播圖元件

複習鞏固vue知識,開始製作bulbBright(類似於微博的程式)。
關於vue官方元件輪播圖。通俗易懂的說:先開啟cmd,cd 你的專案路徑,然後全域性安裝就是輸入指令npm install -S vue-carousel。接下來main。js檔案下輸入import VueCarousel from 'vue-carousel'; 
Vue.use(VueCarousel); 回到元件檔案中輸入

<template>

<div id="Left">
    <div id="carousel1">
        <carousel class="index-carousel" :autoplay="true" :minSwipeDistance="40"
             :scrollPerPage="true" :speed="500" :perPage="1" :paginationPadding="10"
              :paginationSize="10" :loop="true" @param="right">
    
        <slide>
            圖片
        </slide>
        <slide>
            圖片
        </slide>
        <slide>
            圖片什麼的
        </slide>
          </carousel>
    </div>
</div>

</template>

<script>

import { Carousel, Slide } from 'vue-carousel';

export default {

name:"Left",
  components: {
    Carousel,
    Slide
  },
  
  methods:{
  
  },

};
</script>