如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
<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-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版本亲测可用