第關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決目錄iview按需引用后使用this.$Modal報(bào)錯(cuò)錯(cuò)誤信息如下原因如下解決方法iview中如何按需加載Moda

iview按需引用后使用this.$Modal報(bào)錯(cuò)

在做需求的時(shí)候，需要在點(diǎn)擊某處的時(shí)候出現(xiàn)一個(gè)警告框，于是想到使用iview官方文檔的所推薦的Modal對話框來創(chuàng)建一次性的輕量級對話框。

main.js中引入了iview

import{Button，Modal}from'iview'

Vponent('Button',Button)

Vponent('Modal',Modal)

錯(cuò)誤信息如下

代碼如下：

template

Button@click="instance('warning')"warning/Button

Button@click="instance('success')"Success/Button

/template

script

exportdefault{

methods:{

instance(type){

consttitle='Title';

constcontent='pContentofdialog/ppContentofdialog/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(inpromise)TypeError:Cannotreadpropertywarningofundefined

原因：打印出來的this.$Modal也是undefined，說明沒有聲明$Modal

解決方法

在main.js中$Model聲明一下：

Vtotype.$Modal=Modal

iview中如何按需加載Moda

iview文檔:/components/modal

第一步使用modal組件,如何在我需要的時(shí)候在加載內(nèi)容

初始值:isShow=false

使用v-if指令

divv-if="isShow"

Modalv-model="addUser"

title="創(chuàng)建用戶"

add-user/add-user

/Modal

/div

在使用時(shí)再讓isShow=true,這樣dom就會(huì)重新渲染

如何此時(shí)addUser=true的話,你會(huì)看不到動(dòng)畫效果的,因?yàn)檫@存在一個(gè)異步

需要dom加載完成后操作

constthat=this;

this.isShow=true;

this.$nextTick(function(){

that.addUser=true;

})

引入

constaddUser=()=import('xx.js');

components:{

"add-user":addUser

}