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

发布时间:2023-05-19 11:00

目录
  • van-dialog组件调用报错
  • van弹窗组件van-dialog遇到的坑

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部分
     
          
                 
{{item}}
         
     
// 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})
     }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号