vant Dialog组件调用的坑

2,078 阅读1分钟
如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
<van-dialog v-model="show" title="&#x6807;&#x9898;" 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-component.js

import Vue from 'vue'
import { Icon, Toast, Dialog } from 'vant';
Vue.use(Icon);
Vue.use(Toast);
Vue.use(Dialog);
// main.js

import './import-component'

2.12.6版本亲测可用