VantUI 图片放大预览的两种方式

第一种：函数调用

import { ImagePreview } from 'vant';
ImagePreview({
                images: this.imagesList, // 图片集合
                closeable: true		// 关闭按钮
})

第二种：组件调用
组件调用区分全局调用或局部调用。全局调用使用Vue.use()组册，局部调用使用components注册。

• 全局

Main.js 引入
import { ImagePreview } from 'vant';
Vue.use(ImagePreview);

// 调用
ImagePreview({
                images: this.imagesList,
                closeable: true	
})

• 局部

import previewPicture1 from '../../components/vant-packs/preview-picture';
// 引用
<previewPicture1 v-if="imgShow" 
            :isShow="imgShow"
            :list="images"
            @handleClose="handleImgClose"
            />
// 注册
components:{ previewPicture1 }

// 子组件
<van-image-preview v-model="show" :images="list" @change="onChange" @closed="handleClosed">
            <template v-slot:index>第{{ index+1 }}页</template>
            <template #cover>第{{ index+1 }}页</template>
</van-image-preview>

参考文献：https://youzan.github.io/vant/#/zh-CN/image-preview