vant Dialog组件调用的坑

vant Dialog 组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-dialog v-model="show" title="标题" show-cancel-button>
  <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
</van-dialog>

export default {
  data() {
    return {
      show: false,
    };
  },
};

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

解决：Dialog组件使用全局引入的方式调用

import { Dialog } from "vant"
Vue.use(Dialog)