vue2使用Vant组件轮播图实现图片预览

步骤一:引入

// 通过调用 ImagePreview 
import { ImagePreview } from 'vant';

步骤二:注册方式

// 局部注册
export default {
  // 图片预览 局部注册
  components: {
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
}

// 全局注册 在main.js文件内  ImagePreview==>这是一个函数,如果你需要全局注册需要点出
    Vue.use(ImagePreview.Component);

步骤三:使用该组件视图

<van-image-preview v-model="show" :images="images" @change="onChange">
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>

步骤四:

 视图部分添加初始索引属性startPosition,另外在data属性中记得要定义

<van-image-preview v-model="show" :images="images" @change="onChange" :startPosition="startPosition"
>
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>

// startPosition  索引

export default {
  data() {
    return {
      startPosition:0
    };
  },
}

       在轮播图的图片上绑定一个点击事件传入轮播图下标,当点击这个图片的时候将下标赋值给预览图片的初始索引,以达到点击第几张轮播的图片预览第几张       

       

imgClick(index){
      this.startPosition = index  // 将轮播图图片下标赋值给预览图片的索引
      this.show = true            // 显示预览
    }
  },

// imgClick  轮播图图片上绑定的事件