關(guān)于iview按需引用后使用this.$Modal報(bào)錯(cuò)的解決
iview按需引用后使用this.$Modal報(bào)錯(cuò)
在做需求的時(shí)候，需要在點(diǎn)擊某處的時(shí)候出現(xiàn)一個(gè)警告框，于是想到使用iview官方文檔的所推薦的Modal對(duì)話框來創(chuàng)建一次性的輕量級(jí)對(duì)話框。
main.js中引入了iview
import { Button， Modal } from 'iview'
Vue.component('Button', Button)
Vue.component('Modal', Modal)錯(cuò)誤信息如下
代碼如下：
<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組件,如何在我需要的時(shí)候在加載內(nèi)容?
初始值:isShow=false
使用v-if指令
? <div v-if="isShow"> ? ? ? ? <Modal v-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加載完成后操作
?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',}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue3 Teleport 組件的實(shí)踐及原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目
最近在學(xué)習(xí)vue，本文主要介紹了使用idea創(chuàng)建第一個(gè)Vue項(xiàng)目，文中根據(jù)圖文介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.js標(biāo)簽頁組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2019-10-10
vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標(biāo)定位點(diǎn)的實(shí)現(xiàn)代碼,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue-router的hooks用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10