vue3.x 中使用 vant3.0 的 ImagePreview 组件遇到的问题

一、采用函数调用的方式使用

起初，想和其他组件一样在公共文件中引入注册

import { ImagePreview } from 'vant';

Vue.use(ImagePreview);

报错如下：

后来改变了组件的引入方式，在需要使用的页面单独引入，就可以了

import {ImagePreview} from "vant";
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
		imagePreview(imgs, index) {
		  ImagePreview({
		    images: imgs,
		    startPosition: index,
		  })
		},
	})
    return {
      ...toRefs(state)
    }
  }
}

二、解决路由跳转后遮罩层还显示的问题

import { ImagePreview } from "vant";
import { reactive, toRefs, onUnmounted } from 'vue'
export default {
  setup () {
    const state = reactive({
      imagePreview(imgs, index) {
        state.ImagePreviewDialog = ImagePreview({
          images: imgs,
          startPosition: index
        })
      },
    })
    onUnmounted(() => { // 解决路由跳转后遮罩还显示的问题
      if(state.ImagePreviewDialog) {
        state.ImagePreviewDialog.close();
      }
    })
    return {
      ...toRefs(state)
    }
  }
}