插件vue-swipe在vue中的使用

<template>
    <div>
        <swipe class="my-swipe">
            <swipe-item class="slide1"></swipe-item>
            <swipe-item class="slide2"></swipe-item>
            <swipe-item class="slide3"></swipe-item>
        </swipe>
    </div>
</template>
<script>
import  'vue-swipe/dist/vue-swipe.css';
import { Swipe, SwipeItem } from 'vue-swipe';
export default {
    components: {
        'swipe': Swipe,
        'swipe-item': SwipeItem
    }
}
</script>
<style>
.my-swipe {
    width: 6.4rem;
    height: 3rem;
    color: #fff;
    font-size:.3rem;
    text-align: center;
    padding-top: .8rem;
    }   
.slide1 {
    /* background-color: #0089dc; */
    color: #fff;
    background: url('../assets/img/banner1.jpg');
    background-size: 100%,3rem
    }  
.slide2 {
    /* background-color: #ffd705; */
    background: url('../assets/img/banner2.jpg');
    color: #000;
    background-size: 100%,3rem
    }   
.slide3 {
    /* background-color: #ff2d4b; */
    background: url('../assets/img/banner3.jpg');
    color: #fff;
    background-size: 100%,3rem
}
</style>