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