关于iview按需引用后使用this.$Modal报错的解决

目录
  • iview按需引用后使用this.$Modal报错
    • 错误信息如下
    • 原因如下
    • 解决方法
  • iview中如何按需加载Moda

iview按需引用后使用this.$Modal报错

在做需求的时候，需要在点击某处的时候出现一个警告框，于是想到使用iview官方文档的所推荐的Modal对话框来创建一次性的轻量级对话框。

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()

结果：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组件,如何在我需要的时候在加载内容?

初始值:isShow=false

使用v-if指令

  <div v-if="isShow">
        <Modal v-model="addUser"  title="创建用户" >
            <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',}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show

    需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如下: 代码解释:setTem是一个方法,改变modal为true,默认为false : chart-line是图表子组件,通过data向其传递参数,data绑定的数据是父组件mounted后拿到的数据 效果图:点击btn后的确显示了modal框,但是里面的图表不能显示,接着改变子组件任何代码,迫使重新编译子组件,则子组件的图表可以正常显示 分析:当点击btn时,modal框的确弹出来了,但

  • 创建Vue项目以及引入Iview的方法示例

    创建Vue项目 以及引入Iview 官方文档 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev 以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法. 我创建Vue项目过程 $ vue init webpack

  • 详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）

    由于Iview编译使用到了es6的一些新特性,Internet Explorer所有版本中都会报错,缺少includes.findIxdex等问题. 本人研究涉及到的环境:VueCli3.2 + iview 3.1.5 在IE中不支持ES6的新特性,例如:includes.findIndex-- 以下方案可以解决该问题: 1.  Github iview仓储Issues中提到的 改编译范围请用 transpileDependencies: ['iview'],不要用 include.add,因为

  • 在vue项目中引用Iview的方法

    关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 # 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事无巨细的文档 可自定义主题 iview 安装 npm install iview --save 引入iview import Vue from 'vue' import App from './App' import router from './router' import iView fro

  • 关于iview按需引用后使用this.$Modal报错的解决

    目录 iview按需引用后使用this.$Modal报错 错误信息如下 原因如下 解决方法 iview中如何按需加载Moda iview按需引用后使用this.$Modal报错 在做需求的时候,需要在点击某处的时候出现一个警告框,于是想到使用iview官方文档的所推荐的Modal对话框来创建一次性的轻量级对话框. main.js中引入了iview import { Button, Modal } from 'iview' Vue.component('Button', Button) Vue.c

  • postgresql修改完端口后直接psql连接数据库报错的解决

    今天修改pg的端口号port改成5435后重启完数据库的时候直接psql进库的时候进不去 [postgres@node2 data]$ psql psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/tmp/.s.PGSQL.5432 这时,进数据库有两种方式 1.psq

  • 关于Android Studio安装完后activity_main.xml前几行报错的解决建议

    当你安装完Android Studio之后,开始了一个新项目,然后你发现: activity_main.xml前几行报错,比如http://schemas.android.com/apk/res/android "URI is not registered". move refactoring is not available while indexing is in progress. apply script build.gradle有问题. activity_main.xml下的

  • 关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    关于vue3 解决getCurrentInstance 打包后线上环境报错问题

    getCurrentInstance getCurrentInstance 支持访问内部组件实例. WARNING getCurrentInstance 只暴露给高阶使用场景,典型的比如在库中.强烈反对在应用的代码中使用 getCurrentInstance.请不要把它当作在组合式 API 中获取 this 的替代方案来使用. import { getCurrentInstance } from 'vue' const MyComponent = { setup() { const intern

  • angularjs使用gulp-uglify压缩后执行报错的解决方法

    问题出现原因是由于压缩之后变量变成了,e.s.t等,需要依赖注入的方法没有使用中括号注入,而在function的参数中直接使用,导致压缩之后无法识别需要依赖注入的模块.例如: var module= angular.module('homeApp', ['ui.router']); module.config(function ($sceProvider) { $sceProvider.enabled(false); }) 改为: var module= angular.module('home

  • vue-cli 项目打包完成后运行文件路径报错问题

    本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码 找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

  • vue打包静态资源后显示空白及static文件路径报错的解决

    今天使用vue打包(npm run build)遇到了几个坑,在这里分享给大家 打包之后打开dist的页面显示空白: 这个问题以前就处理过,是打包过程中出现错误频率较高的一种,可能有3处地方会出现这种情况 1.记得改一下config下面的index.js中bulid模块导出的路径.因为打包后的index.html里边的内容都是通过script标签引入的,默认显示的路径不对,打开肯定是空白的. build: { index: path.resolve(__dirname, '../dist/ind

  • vue-router 按需加载 component: () => import() 报错的解决

    vue的单页面(SPA)项目,必然涉及路由按需的问题. 以前我们是这么做的 //require.ensure是webpack里面的,这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue'))); 但现在vue-router的官网看看,推荐这种方式: //vue异步组件和webpack的[代码分块点]功能结合,实现了按需加载 const App =

  • Webpack-cli安装成功后查看webpack -v报错案例详解

    Webpack-cli安装成功后查看webpack -v报错案例详解

    目录 问题 1. 安装webpack webpack-cli 2. 查看webpack 版本 解决 1. 查看node版本 2. 升级npm 3. 查看webpack版本 问题 1. 安装webpack webpack-cli npm install -g webpack webpack-cli 2. 查看webpack 版本 webpack -v 报错 /usr/local/lib/node_modules/webpack/lib/cli.js:66 .replace( ^ SyntaxErr

  • Typescript中使用引用路径别名报错的解决方法

    Typescript中使用引用路径别名报错的解决方法

    在TS中引用路径别名提示找不到模块或者相应的声明 1.ts中使用路径别名报错 在react中通常路径别名都是在webpack的webpack.config.js文件中配置的,但是在引入了ts之后,webpack中的路径别名引用失效了此时我们需要在跟src文件同级目录的tsconfig.json文件中添加配置: 注意要在compilerOptions中添加(webpack中的路径也需要配置) "compilerOptions": { "target": "e

随机推荐