van-dialog组件调用报错的解决

van-dialog组件调用报错

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

<van-dialog
 v-model="show"
 title="标题"
 show-cancel-button
>
 <img src="http://p1.codesocang.com/jiaoben/tu/202205/apple-3.jpg">
</van-dialog>

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

按照逛网 这样写， 结果 报错。不能正常使用。。。。这么费事？

原因：自己不细心导致！

首先：使用组件调用，那 一定要引用组件。

引用方式很重要，不是 ··import { Dialog } from 'vant';

而是：

通过组件调用 Dialog 时，可以通过下面的方式进行注册

import { Dialog } from 'vant';
// 全局注册
Vue.use(Dialog);
// 局部注册
export default {
 components: {
  [Dialog.Component.name]: Dialog.Component
 }
}

van弹窗组件van-dialog遇到的坑

// HTML部分
  <van-dialog
        v-model="dialogshow"
        confirm-button-text=“继续采集"
        cancel-button-text=“取消采集"
        title=“该户数据已采集，是否继续？"
        show-cancel-buttoon
        @confirm=“dialogConfirm"
       @cancel="dialogCancel"
   >
     <div v-for="(item,index) in list" :key="index">
         <div>{{item}}</div>
     </div>
  </van-dialog>

// JS部分
  data(){
    return{
        dialogshow:false,
        list:[]
    }
  }
   dialogconfirm(){
   // 该步骤就是遇到的坑，不做这一步处理点击关闭弹窗后页面就会卡住无法拖动，后面发现是这个组件的这个节点没有清除
    导致页面卡顿，真的太坑了van的有些组件。。。      
        document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')
        this.dialogshow=false
   },
   dialogcancel(){
       this.dialogshow=false
       this.$router.push({name:home})
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。