van-dialog組件調(diào)用報(bào)錯(cuò)怎么解決

今天小編給大家分享一下van-dialog組件調(diào)用報(bào)錯(cuò)怎么解決的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

van-dialog組件調(diào)用報(bào)錯(cuò)

如果需要在彈窗內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式

<van-dialog
  v-model="show"
  title="標(biāo)題"
  show-cancel-button
>
  <img src="https://cache.yisu.com/upload/information/20220526/112/1330.jpg">
</van-dialog>

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

按照逛網(wǎng) 這樣寫(xiě)，  結(jié)果 報(bào)錯(cuò)。不能正常使用。。。。這么費(fèi)事？

原因：自己不細(xì)心導(dǎo)致！

首先：使用組件調(diào)用，那 一定要引用組件。

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

而是： 

通過(guò)組件調(diào)用 Dialog 時(shí)，可以通過(guò)下面的方式進(jìn)行注冊(cè)

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

van彈窗組件van-dialog遇到的坑

// HTML部分
     <van-dialog
                 v-model="dialogshow"
                 confirm-button-text=“繼續(xù)采集"
                cancel-button-text=“取消采集"
                title=“該戶(hù)數(shù)據(jù)已采集，是否繼續(xù)？"
                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(){
      // 該步驟就是遇到的坑，不做這一步處理點(diǎn)擊關(guān)閉彈窗后頁(yè)面就會(huì)卡住無(wú)法拖動(dòng)，后面發(fā)現(xiàn)是這個(gè)組件的這個(gè)節(jié)點(diǎn)沒(méi)有清除
         導(dǎo)致頁(yè)面卡頓，真的太坑了van的有些組件。。。             
                document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')
                this.dialogshow=false
      },
      dialogcancel(){
               this.dialogshow=false
               this.$router.push({name:home})
     }

以上就是“van-dialog組件調(diào)用報(bào)錯(cuò)怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。