美文网首页
vue使用swipe组件

vue使用swipe组件

作者: noyanse | 来源:发表于2018-05-09 14:33 被阅读0次

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>

相关文章

网友评论

      本文标题:vue使用swipe组件

      本文链接:https://www.haomeiwen.com/subject/cegnrftx.html