vant Dialog组件调用的坑

---

场景

在做移动端项目时，需要完成一个带有倒计时按钮的弹窗，这就需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-dialog v-model="isShow" title="消息" show-cancel-button><div>自定义内容...</div>
</van-dialog>

坑：如果使用 按需引入+组件调用 的方式，Dialog不受 v-mode l的值的控制，会自动显示蒙层和一个确定按钮：

<template><van-dialog>...</van-dialog>
</template><script>
import {Dialog} from 'vant';export default {name: "my-popup",components: {VanDialog: Dialog}
}
</script>
...

解决方案

Dialog 是一个函数，不是组件，因此不支持局部注册，正确的注册方法是 Vue.use(Dialog)，即使用 全局引入 的方式调用：

<template><van-dialog>...</van-dialog>
</template><script>
import Vue from 'vue'
import {Dialog} from 'vant';
Vue.use(Dialog);export default {name: "my-popup"
}
</script>