2018.01.26.使用vue輪播圖元件
阿新 • • 發佈:2019-01-22
複習鞏固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>