關(guān)于iview按需引用后使用this.$Modal報錯的解決
更新時間：2022年09月09日 14:55:11 作者：linefate
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
iview按需引用后使用this.$Modal報錯
在做需求的時候，需要在點擊某處的時候出現(xiàn)一個警告框，于是想到使用iview官方文檔的所推薦的Modal對話框來創(chuàng)建一次性的輕量級對話框。
main.js中引入了iview
import { Button， Modal } from 'iview'
Vue.component('Button', Button)
Vue.component('Modal', Modal)錯誤信息如下
代碼如下：
<template>
<Button @click="instance('warning')">warning</Button>
<Button @click="instance('success')">Success</Button>
</template><script>
export default {
methods: {
instance (type) {
const title = 'Title';
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
switch (type) {
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
}
}
}
}
</script>原因如下
引用：this.$Modal.warning()
結(jié)果：Uncaught (in promise) TypeError: Cannot read property 'warning' of undefined
原因：打印出來的this.$Modal也是undefined，說明沒有聲明$Modal
解決方法
在main.js中$Model聲明一下：
Vue.prototype.$Modal = Modal
iview中如何按需加載Moda
iview文檔:https://www.iviewui.com/components/modal
第一步使用modal組件,如何在我需要的時候在加載內(nèi)容?
初始值:isShow=false
使用v-if指令
? <div v-if="isShow"> ? ? ? ? <Modal v-model="addUser" ?title="創(chuàng)建用戶" > ? ? ? ? ? ? <add-user></add-user> ? ? ? ? </Modal> ? ? </div>
在使用時再讓isShow=true,這樣dom就會重新渲染
如何此時addUser=true的話,你會看不到動畫效果的,因為這存在一個異步
需要dom加載完成后操作
?const that = this;
?this.isShow = true;
? ? ?this.$nextTick(function () {
? ? ? ? ?that.addUser =true;
? ? ?})引入
const addUser =()=>import('xx.js');
components:{
? ? ? ? "add-user":addUser
? ? },還有一步:
output:{chunkFilename: 'js/[name].js',}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的
這篇文章主要介紹了Vue是怎么渲染template內(nèi)的標(biāo)簽內(nèi)容的，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點及用法總結(jié)內(nèi)容，有興趣的的朋友們可以學(xué)習(xí)下。2021-12-12
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法，本文通過組價刷新的案列給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vscode如何創(chuàng)建vue項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue中引用阿里字體圖標(biāo)出現(xiàn)錯誤問題的解決方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
這篇文章主要介紹了Vue.js 圖標(biāo)選擇組件實踐詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉(zhuǎn)路由,路由組件會渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Vue.directive使用注意(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
下面小編就為大家分享一篇解決vue build打包之后首頁白屏的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03