van-dialog組件調用報錯怎么解決

今天小編給大家分享一下van-dialog組件調用報錯怎么解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

van-dialog組件調用報錯

如果需要在彈窗內嵌入組件或其他自定義內容，可以使用組件調用的方式

<van-dialog
  v-model="show"
  title="標題"
  show-cancel-button
>
  <img src="https://cache.yisu.com/upload/information/20220526/112/1330.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})
     }

以上就是“van-dialog組件調用報錯怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。