van-dialog 組件調用報錯的解決

Posted on by

van-dialog組件調用報錯

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

<van-dialog
  v-model="show"
  title="標題"
  show-cancel-button
>
  <img src="https://img.yzcdn.cn/vant/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})
     }

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：