在vue-cli脚手架中使用vant

通常情况下，我们在使用轮播图时，首先会想到swiper插件，但是在vue-cli脚手架中使用swiper会出现某些版本的一些功能不可以使用，会造成困扰。

其实，使用vant也是一个不错的选择，本文就是针对在vue-cli脚手架中使用vant的具体且详细用法（以swipe举例，其他组件用法相同），可以仔细阅读哦！

网址：https://vant-ui.github.io/vant/v2/

1.安装包

//vant@latest-v2  在vue2中使用
npm i vant@latest-v2 -s

2.按需导入

• 通常情况下我们会在src路径下创建util文件下创建一个js文件，当然也可以直接在入口文件中导入。
• 在vant中，有许多我们可以用到的组件，我们可以根据需求按需导入。
• 例如这里，我用的是vant中的swipe，就只需要导入 Swipe,SwipeItem组件即可。

//在src路径下创建util文件下创建一个js文件（vantCom.js）
import Vue from 'vue'
//导入vant所有的样式
import 'vant/lib/index.css'
//按需导入（组件）
import {
    
    Swipe,SwipeItem} from 'vant'

//Vue挂在vant组件---在所有的.vue文件都可以使用van-swipe,van-swipe-item
Vue.use(Swipe)
Vue.use(SwipeItem)

3.在main.js中导入

//在入口文件中导入vantCom.js文件
import '@/util/vantCom.js'

4.可以参照下图

5.在components组件在使用

<template>
  <div class="">
    <div class="Swiper">
        <!-- 轮播图 -->
      <!-- 
        1. van-swipe相当于轮播图的容器
          可以在容器上设置api
          常用的api：
            (1)autoplay：自动轮播间隔的事件1000，相当于1秒
            (2)loop：是否开启循环播放
            (3)vertical：是否为纵向滚动
            (4)touchable：是否可以通过手势滑动
            (5)show-indicators：是否显示指示器（分页器）
            (6)indicator-color：指示器颜色
          swipe Events事件
            (1)change：每一页轮播结束后触发  ||  回调参数：index，当前页的索引值
      -->
      <van-swipe ref="swipeRef" class="my-swipe" :autoplay="3000" indicator-color="white" @change="handleChange">
        <!-- 
          2. van-swipe-item代表每一张轮播的卡片（图片）
            SwipeItem Events事件
              (1)click：点击每一页的轮播图触发  ||  回调参数：event:Event
              例如：点轮播图可以跳转到新的页面
        -->
        <van-swipe-item v-for="(item,index) in swiperList" :key="index" @click="handleSwipeClick">
          <img :src="item" alt="" class="pic">
        </van-swipe-item>
        <!-- 
          3.自定义指示器 替换掉默认的小圆点指示器 indicator插槽
        -->
        <template v-slot:indicator>
          <p class="myIndicator">{
    
    {
    
    current+1}}/{
    
    {
    
    swiperList.length}}</p>
        </template>
        
      </van-swipe>
      <!-- 
            4.通过按钮触发swipe组件的滚动
              swipe方法：通过 ref 可以获取到 Swipe 实例并调用实例方法
                (1)prev：切换到上一轮播
                (2)next：切换到下一轮播
                (3)swipeTo：切换到指定位置  || 参数：index: number, options: Options
          -->
          <a href="#" @click="handlePrev" class="prev">&lt;</a>
          <a href="#" @click="handleNext" class="next">&gt;</a>
          <input type="button" value="跳转第二张" @click="handleSwipeTo">
    </div>

  </div>
</template>

<script>
export default {
    
    
  components: {
    
    },
  data () {
    
    
    return {
    
    
      current:'',
      swiperList:[]
    }
  },
  methods: {
    
    
    // 获取轮播图的数据
    async getSwiperList (){
    
    
      let {
    
    data} = await this.$http('cate')
      console.log(data.swipe)
      this.swiperList=data.swipe
    },
    // 获取当前页的索引
    handleChange(i){
    
    
      this.current=i
    },
    // 点击跳转到其他的页面
    handleSwipeClick(e){
    
    
      console.log(e)//事件源
      // this.$router.push({name:'/指定路由'})
    },
    // 点击跳转到上一页
    handlePrev(){
    
    
      this.$refs.swipeRef.prev()
    },
    // 点击跳转到下一页
    handleNext(){
    
    
      this.$refs.swipeRef.next()
    },
    // 跳转到指定页
    handleSwipeTo(){
    
    
      //true 取消动画
      this.$refs.swipeRef.swipeTo(1,{
    
    immediate:true})
    }
  },
  created () {
    
    
    this.getSwiperList()
  }
}
</script>
<style lang="less" scoped>
.Swiper{
    
    
  position: relative;
}
.my-swipe .van-swipe-item {
    
    
    width: 37.5rem;
    height: auto;
  }

  .my-swipe .van-swipe-item img {
    
    
    width: 100%;
    height: 100%;
  }

  .myIndicator{
    
    
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -1rem;
    color: #fff;
    font-size: 1.6rem;
  }

  .prev,
  .next{
    
    
    font-size: 3rem;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -1.7rem;
  }

  .prev{
    
    
    left: 1rem;
  }

  .next{
    
    
    right: 1rem;
  }
</style>

6.效果图

vue-cli中使用vant轮播图