this.$confirm is not a function（关于使用element-ti MessageBox可能会遇到的问题）

最新推荐文章于 2024-09-13 10:51:19 发布
最新推荐文章于 2024-09-13 10:51:19 发布
阅读量8.9k 收藏 3
点赞数 3
分类专栏： vue日记 element-ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallNut/article/details/105793940
版权

今天在写代码的时候使用到了element-ui中的MessageBox作为确认Modal提示框，但是因为项目非将element-ui组件全部引入而是部分引入所以一开始的时候是在main.js中引入MessageBox但是调用方法时遇到页面报错

在这里插入图片描述
后来采用局部引入方式
在这里插入图片描述
但是调用方法时遇到如下报错
在这里插入图片描述
后来发现原因是此时的$confirm是全局引入ElementUI的时候才使用的，局部使用时应改为confirm
在这里插入图片描述
解决方法参考于 https://segmentfault.com/q/1010000020792045
感谢前人们的贡献让这条路越来越好走，希望能帮到刚好遇到此问题的朋友

花心小坚果
关注
专栏目录
【element】删除二次确认框 this.$confirm
jieweiwujie的博客
10-28 2928
<template> <div class="home"> <div id="nav"> <el-button type="info" @click="showFun">showFun</el-button> </div> </div> </template> <script> export default { methods:{ show.
this.$confirm is not a function
qq_42507938的博客
02-22 1550
this.$confirm is not a function 今天在做项目的时候发在使用$confirm方法的时候总是会报错 查了好多文章都是说因为没有引入MessageBox模块，但是我是全局引入的，于是在多方尝试下，在main.js中定义： import Vue from 'vue' import Element from 'element-ui' Vue.use(Element) //重点：下面这句代码必须要写到Vue.use(Element)下面，否则还会继续报错 Vue.prototype.
Vue TypeError: this.$confirm is not a function
哈
11-23 1万+
错误 在使用element ui，采用局部引入时候，报错TypeError: this.$confirm is not a function。 因为没有在vue的实例上挂载confirm和confirm和confirm和message导致的报错 解决方案 修改element.js文件： 1 引入messageBox 插件 import {MessageBox} from ‘element-ui’ 2 在vue 的原型对象上挂载confirm Vue.prototype.$confirm = Mess
ElementPlus表单验证报错 formEl.validate is not a function
最新发布
weixin_73060959的博客
09-13 540
【代码】ElementPlus表单验证报错 formEl.validate is not a function。
element UI - this.$confirm is not a function, this.$message is not a function, this.$alert is not a
cc蒲公英的博客
11-29 481
element UI - this.$confirm is not a function, this.$message is not a function, this.$alert is not a
$confirm is not a function($confirm报错的解决方法)
jin_ba_dao的博客
10-18 8320
element $confirm is not a function (解决方法) **解决方法:**如下图所示: 引入MessageBox弹框 把上图的this.$confirm改为MessageBox.confirm 即可 谢谢
this.$message ,this.$confirm is not a function问题解决
山谷里的杂货铺
08-12 1191
代码之前都没有报这个错，但是今天突然报这个错，关于这块的代码也没有做过改动，但是引入了ant-design-vue这个框架，最后百度发现就是引入这个包造成的，把这行代码注释掉问题就解决了 ...
Element UI学习8--this.$prompt,this.$message,this.$confirm,this.$notify
hanrabbit的博客
01-26 8963
1、this.$prompt 输入框弹窗 if (object == undefined) { this.$prompt('请输入', '添加优惠券分类', { confirmButtonText: '确定', cancelButtonText: '取消' }).then(async ({ value }) => { }) 如图： 2、this.$message 消息提示 if (re
this.$confirm自定义内容
Lilico_的博客
03-25 1508
let nameData = this.form.data.mallCombos const h = this.$createElement const newName = [] nameData.forEach(item => { item.data = '【' + item.name + '】' + '套餐价格为:' + item.sellPrice newName.push(h('p', null, item.data)) }) this.$confirm('提示', {
解决消息通知被el-dialog对话框的遮挡的问题($message、$alert、$notify、$confirm)
dingdingdandang的博客
04-12 3568
文章目录1. 原因分析2. 完美解决3. 效果 1. 原因分析 出现这种情况的原因是因为消息弹窗的层级z-index比对话框低导致的，消息弹窗的z-index一般在2001，而对话框的z-index在3000左右。 解决思路很简单，我们只要把对话框的z-index降低即可，让它显示在消息弹窗下面，所以我们只要把对话框的z-index设为1000左右即可,但不要太低，以免对话框被覆盖。 2. 完美解决 直接在对话框上加 :z-index="1000" 3. 效果 ...
element中 仿$confirm 确认框
最爱松露巧克力
01-13 5387
前端交互中经常使用确认框。在删除、修改等操作时，调用后端接口之前，先跳出弹框显示提示信息，提示用户确认，避免用户误操作。 项目中全局引入了Element UI，提供了一套模态对话框组件，用于消息提示、确认消息、提交内容，使用起来也非常简便。 （什么是“模态”？可将其理解为：特定条件触发之后产生的） 以下来自于element官网文档： 如果你完整引入了 Element，它会为Vue.prototype添加如下全局方法：$msgbox,$alert,$confirm和$prompt。因此在Vue ...
Error in v-on handler: “TypeError: this.$confirm is not a function“
行云出岫
08-27 5714
在vue项目中从全局引入element-ui改为按需引入后报错 解决方法： 1 引入messageBox 插件 import {MessageBox} from ‘element-ui’ 2 在vue 的原型对象上挂载confirm Vue.prototype.$confirm = MessageBox.confirm
ant design “xx.confirm is not a function“ and not show dialog.
weixin_43814775的博客
04-21 293
ant design "xx.confirm is not a function" and not show dialog.
vue elementui $confirm is not a function 正确解决办法
liv空间站
08-27 1811
目录1.问题描述2.输出对象3.解决办法 1.问题描述 正常写this.confirm或者Vue.confirm或者Vue.confirm或者Vue.confirm，可能会报错$confirm is not a function，这是由于Vue对象下并没有这个方法，查看Vue或者this对象，发现prototype对象下有很多方法，其中就包含 $confirm 2.输出对象 console.log(Vue.prototype) console.log(this.prototype) 3.解决办法 其实看
this.$message is not a function
java_Trainees的博客
09-19 1667
出现次错误地原因是我们在axios中使用了vue的this对象。
【element】TypeError: this.$message is not a function报错情况解决
DecorateCC的博客
11-20 1446
适合于你负责的项目，之后肯定会经常用到，首先找到项目的plugin.js文件，这个文件一般在utils文件目录下，这个文件一般都是负责整个项目的全局配置属性。具体代码逻辑要看每个项目不同的配置写法，我这个是vue项目，提供的是一种方法，具体要往哪里写，各位看官自行研究。在最近负责的一个前端项目中，使用this.$message报错了，之前也没注意，然后这次抽空看了一下问题。首先，在你要用的页面去引入。
TypeError: this.$message is not a function报错情况解决
Vivien_CC的博客
09-20 4471
文件目录下，这个文件一般都是负责整个项目的全局配置属性，然后同样的。也可以全局配置，经常用的时候可以这么干。小白频频踩坑，emo住了...文件，这个文件一般在。
_this.$message is not a function错误解决
热门推荐
qq_40608283的博客
11-30 2万+
解决方法以一： 在页面引入：import{Message}from"element-ui"; 然后调用即可 解决方法二： 把antd的引入删除，即可。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值