2-4轮播 vant-ui

一、

yarn add vant

导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件

二、代码片段

<template>
  <div id="app">
      <van-swipe class="wrap" :autoplay="autoplay" indicator-color="color">
      <van-swipe-item>
        <img src="@/assets/1.jpeg"/>
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/2.jpg"/>
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/3.jpg"/>
      </van-swipe-item>
      <van-swipe-item>
        <img src="@/assets/logo.png"/>
      </van-swipe-item>
</van-swipe>
  </div>
</template>
<script>
export default {
  name: 'app',
  data(){
    return{
      autoplay:2000,
      color:"#333"
    }
  }
}
</script>
<style scoped>
img{
  width: 100%;
  height: 300px;
}
</style>