van-dialog 組件調(diào)用報(bào)錯(cuò)的解決
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://img.yzcdn.cn/vant/apple-3.jpg"> </van-dialog>
export default { ? data() { ? ? return { ? ? ? show: false ? ? }; ? } }
按照逛網(wǎng) 這樣寫, 結(jié)果 報(bào)錯(cuò)。不能正常使用。。。。這么費(fèi)事?
原因:自己不細(xì)心導(dǎo)致!
首先:使用組件調(diào)用,那 一定要引用組件。
引用方式很重要,不是 ··import { Dialog } from 'vant';
而是:
通過組件調(diào)用 Dialog 時(shí),可以通過下面的方式進(jìn)行注冊
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(){ ? ? ? // 該步驟就是遇到的坑,不做這一步處理點(diǎn)擊關(guān)閉彈窗后頁面就會(huì)卡住無法拖動(dòng),后面發(fā)現(xiàn)是這個(gè)組件的這個(gè)節(jié)點(diǎn)沒有清除 ? ? ? ? ?導(dǎo)致頁面卡頓,真的太坑了van的有些組件。。。 ? ? ? ? ? ?? ? ? ? ? ? ? ? ? document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden') ? ? ? ? ? ? ? ? this.dialogshow=false ? ? ? }, ? ? ? dialogcancel(){ ? ? ? ? ? ? ? ?this.dialogshow=false ? ? ? ? ? ? ? ?this.$router.push({name:home}) ? ? ?}
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼(節(jié)流函數(shù)的應(yīng)用場景)
這篇文章主要介紹了vue實(shí)現(xiàn)輸入框的模糊查詢的示例代碼(節(jié)流函數(shù)的應(yīng)用場景),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存
html2canvas是一個(gè)JavaScript庫,它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實(shí)現(xiàn)截取圖片并保存功能,需要的可以參考下2023-12-12vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報(bào)錯(cuò)的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼
在 Vue 中,如果需要將按鈕居中顯示,可以使用 CSS 中的 `text-align: center` 屬性來實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹Vue 按鈕居中、按鈕居左、按鈕居右的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2023-10-10Vue 實(shí)現(xiàn)顯示/隱藏層的思路(加全局點(diǎn)擊事件)
這篇文章主要介紹了Vue 實(shí)現(xiàn)顯示/隱藏層的思路(加全局點(diǎn)擊事件),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法詳解
項(xiàng)目中后臺返回的時(shí)間有多種形式,時(shí)間戳、ISO標(biāo)準(zhǔn)時(shí)間格式等,我們需要轉(zhuǎn)化展示成能看的懂得時(shí)間格式,下面這篇文章主要給大家介紹了關(guān)于vue時(shí)間格式總結(jié)以及轉(zhuǎn)換方法的相關(guān)資料,需要的朋友可以參考下2022-12-12