van-dialog 組件調用報錯的解決
更新時間：2022年05月26日 11:28:58 作者：o笨小孩o
這篇文章主要介紹了van-dialog 組件調用報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
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=“繼續(xù)采集"
? ? ? ? ? ? ? ? cancel-button-text=“取消采集"
? ? ? ? ? ? ? ? title=“該戶數據已采集，是否繼續(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(){
? ? ? // 該步驟就是遇到的坑，不做這一步處理點擊關閉彈窗后頁面就會卡住無法拖動，后面發(fā)現是這個組件的這個節(jié)點沒有清除
? ? ? ? ?導致頁面卡頓，真的太坑了van的有些組件。。。 ? ? ? ? ? ??
? ? ? ? ? ? ? ? document.getElementsByTagName('body')[0].classList.remove('van-overflow-hidden')
? ? ? ? ? ? ? ? this.dialogshow=false
? ? ? },
? ? ? dialogcancel(){
? ? ? ? ? ? ? ?this.dialogshow=false
? ? ? ? ? ? ? ?this.$router.push({name:home})
? ? ?}以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景）
這篇文章主要介紹了vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
html2canvas是一個JavaScript庫,它可以將HTML元素轉換為Canvas元素本文將介紹一下Vue如何使用html2canvas實現截取圖片并保存功能,需要的可以參考下2023-12-12
vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法
這篇文章主要介紹了vue3語法中使用vscode打開滿屏紅線報錯的完美解決方法,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue 動態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標簽添加背景圖片，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue不同方法跳轉頁面，本文給大家分享多種方法，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vue axios 二次封裝的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
在 Vue 中,如果需要將按鈕居中顯示,可以使用 CSS 中的 `text-align: center` 屬性來實現,本文通過實例代碼給大家介紹Vue 按鈕居中、按鈕居左、按鈕居右的實現代碼,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue 實現顯示/隱藏層的思路（加全局點擊事件）,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
項目中后臺返回的時間有多種形式,時間戳、ISO標準時間格式等，我們需要轉化展示成能看的懂得時間格式,下面這篇文章主要給大家介紹了關于vue時間格式總結以及轉換方法的相關資料,需要的朋友可以參考下2022-12-12