[Bug Report] vue3 dialog 组件调用无效，并默认弹出，关闭后无法打开

[lianghw]

重现链接

https://codesandbox.io/s/focused-jang-w2qw42?file=/src/App.vue

Vant 版本

3.5.2

描述一下你遇到的问题。

Dialog 弹窗在vite环境中 ，按需引入，无法正常使用，按照官方的vant-demo工程和官方文档的组件调用方式，无法正常打开和关闭dialog
默认打开，关闭后无法再次打开。



运行工程后直接弹出Dialog弹窗，并抛出异常，因为自定义的信息没有展示，添加内容为官方文档示例

重现步骤

进入页面后默认打开，对于v-model:show 引用的变量无法正常更新组件开启关闭状态，并且无法自定义组件内容。

设备/浏览器

chrome

[lianghw]

求解答 或者 修复啊！

[jayzch]

同求！一直有这个问题，从3.5.0开始。

手动引入了import 'vant/es/dialog/style';也不行

而且必须使用unplugin-vue-components 插件

[jayzch]

@chenjiahan

[chenjiahan]

这个算是 unplugin-vue-components 的问题，插件会检测到 <van-dialog> 标签，然后自动引用 Dialog 函数来渲染，覆盖了你在 components 中声明的 Dialog.Component，导致最终渲染时使用了 Dialog 函数而不是 Dialog.Component 组件。

这个问题已经在 Vant 4.0.0 版本得到根治，从 Vant 4 开始，Dialog 对象是一个组件而非函数，原先的 Dialog 函数被重命名为了 showDialog。

在 Vant 3 中如果要解决这个问题，可以把 <van-dialog> 标签换个名字，避开 unplugin-vue-components 的自动解析逻辑，比如命名为 v-dialog。

<v-dialog v-model:show="show">
  hello
</v-dialog>

export default {
  components: {
    'v-dialog': Dialog.Component,
  },
}

[jayzch]

虽然比较奇葩，但终究是解决了。感谢@ chenjiahan

[jayzch]

@chenjiahan 发现一个问题，引入的第三方字体图标无法正常加载。
在开发期 run dev 时，页面引用正常。
在编译器run build 后，页面所有的第三方图标均不正常。并且查看浏览器network资源加载的字体 并未发起请求。

[chenjiahan]

第三方字体是否加载跟 Vant 没啥关系吧

[Fengqixue]

遇到了同样的问题，在这里找到了解决方案。希望早日解决

[Mr-mao]

可以这样使用
import { Dialog } from 'vant'

const vDialog = Dialog.Component;

[CodeDogHusky]

在组件页面
import { Dialog } from 'vant';

export default {
components: {
Dialog: Dialog.Component,
}

《Dialog》xxxxxx《/Dialog》

引用的时候组件名 改为自己自定义的名字才行

[chenjiahan]

Vant 4.0 rc 版本已彻底解决此问题，issue close 咯