關(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 keep-alive及實踐總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
element中el-table局部刷新的實現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了Vue3 Teleport 組件的實踐及原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
最近在學習vue，本文主要介紹了使用idea創(chuàng)建第一個Vue項目，文中根據(jù)圖文介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vue動態(tài)組件實現(xiàn)選項卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了Vue.js標簽頁組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一2019-10-10
vue使用高德地圖根據(jù)坐標定位點的實現(xiàn)代碼
這篇文章主要介紹了vue使用高德地圖根據(jù)坐標定位點的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue-router的hooks用法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了vue實現(xiàn)頂部導航欄以及跳轉(zhuǎn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10