van-dialog 組件調(diào)用報錯的解決
更新時間：2022年05月26日 11:28:58 作者：o笨小孩o
這篇文章主要介紹了van-dialog 組件調(diào)用報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
van-dialog組件調(diào)用報錯
如果需要在彈窗內(nèi)嵌入組件或其他自定義內(nèi)容，可以使用組件調(diào)用的方式
<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
? ? };
? }
}按照逛網(wǎng) 這樣寫， 結(jié)果 報錯。不能正常使用。。。。這么費事？
原因：自己不細心導(dǎo)致！
首先：使用組件調(diào)用，那 一定要引用組件。
引用方式很重要，不是 ··import { Dialog } from 'vant';
而是：
通過組件調(diào)用 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=“繼續(xù)采集"
? ? ? ? ? ? ? ? cancel-button-text=“取消采集"
? ? ? ? ? ? ? ? title=“該戶數(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(){
? ? ? // 該步驟就是遇到的坑，不做這一步處理點擊關(guān)閉彈窗后頁面就會卡住無法拖動，后面發(fā)現(xiàn)是這個組件的這個節(jié)點沒有清除
? ? ? ? ?導(dǎo)致頁面卡頓，真的太坑了van的有些組件。。。 ? ? ? ? ? ??
? ? ? ? ? ? ? ? document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')
? ? ? ? ? ? ? ? this.dialogshow=false
? ? ? },
? ? ? dialogcancel(){
? ? ? ? ? ? ? ?this.dialogshow=false
? ? ? ? ? ? ? ?this.$router.push({name:home})
? ? ?}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決
這篇文章主要介紹了Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue-rx的初步使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue.js實現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動態(tài)操作、排序、運算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了vue.js學習筆記:如何加載本地json文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。2017-01-01
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題
這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)動態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue?css?相對路徑導(dǎo)入問題級踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了Vue官方文檔梳理之全局配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例
今天小編就為大家分享一篇在vue中使用防抖和節(jié)流,防止重復(fù)點擊或重復(fù)上拉加載實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11