1.安装
npm install vue-swipe
2.main.js中
import { Swipe, SwipeItem } from 'vue-swipe';
//注册轮播图
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);
3.banner.vue
<template>
<swipe class="my-swipe">
<swipe-item class="slide1"></swipe-item>
<swipe-item class="slide2"></swipe-item>
<swipe-item class="slide3"></swipe-item>
</swipe>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import 'vue-swipe/dist/vue-swipe.css';
.my-swipe {
height: 200px;
color: #fff;
font-size: 30px;
text-align: center;
}
.slide1 {
background-color: #0089dc;
color: #fff;
}
.slide2 {
background-color: #ffd705;
color: #000;
}
.slide3 {
background-color: #ff2d4b;
color: #fff;
}
</style>
4. index.vue
<banner></banner>
<script>
import banner from './banner.vue'
export default {
components: {
banner: banner
},
data () {
return {
}
}
}
</script>
网友评论