Vue+Element-ui弹窗 this.$alert is not a function

最新推荐文章于 2024-06-25 08:38:12 发布
最新推荐文章于 2024-06-25 08:38:12 发布
阅读量3.6k 收藏 7
点赞数 11
分类专栏： vue踩坑记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45429941/article/details/115707404
版权

使用问题

Element-ui官网上单独引用MessageBox的话需要在import中加入MessageBox。
在这里插入图片描述
但是在使用时报了this.$alert is not a function
在这里插入图片描述

解决办法

在element.js中加入Vue.prototype.$XXX = MessageBox
在这里插入图片描述
在使用时用this. $XXX.alert
在这里插入图片描述

dyao23
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
elementui引入弹出框报错：this.$alert is not defined 解决方案
lijinquan2009的专栏
09-27 1297
elementui引入弹出框报错：this.$alert is not defined 解决方案
Element Alert警告的具体使用方法
10-15
主要介绍了Element Alert警告的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【区分vue2和vue3下的element UI Alert 警告组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
06-25 524
在 Vue 2 中，Element UI 提供了一个 Alert 警告组件，用于显示警告信息。然而，在 Vue 3 中，由于 Element UI 官方并未直接支持，你可能需要使用 Element Plus，这是 Element UI 的 Vue 3 版本。下面，我将分别为 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 介绍 Alert 组件的属性、事件和方法，并给出使用示例。
记录一下vue的问题，this.$alert is not a function
weixin_44887276的博客
06-16 8042
最近项目快结尾了，还有一个小功能，要完善，对于程序员来讲，当然不能按部就班啊，项目中使用了easy-ui，但是我不想用了，这玩意太老了，再说项目快完了，在一个新功能里面用点新技术，也不要紧，崩了就崩了。 开始说问题，百度了一下，vue中调用methods中的方法互相调用使用this.$options.methods.xxxx; 但是我测试一个弹框的调用，如下。 结果报错了，我giao，报错信息如下，然后呢，问了下前端大佬，用如下方式写就好了 this,xxxxx直接调用方法就好了，比如我的就是this.
“TypeError: this.$confirm is not a function“以及“TypeError: this.$message is not a function“
weixin_38547641的博客
08-27 5835
TypeError: this.$confirm is not a function TypeError: this.$message is not a function 在使用element ui时候，报错，我都是局部引入的，连个报错原因是一样的，因为没有在vue的实例上挂载$confirm和$message导致的报错 解决方法： 在你的入口文件main.js中: import { Message, MessageBox } from 'element-ui' //引入Message, MessageB
element的$alert弹出提示框和$confirm确认框
wangshuai13383347132的博客
07-28 5023
$alert和$confirm
vue结合element-ui和quill富文本编辑器实现上传视频和封面
12-03
Vue.js，作为一款流行的前端框架，与组件库Element-UI的结合为开发者提供了便捷的UI解决方案。而Quill，作为强大的富文本编辑器，支持自定义功能，如上传视频和封面。本篇文章将详细介绍如何在Vue项目中利用Element-...
浅谈Vue.use到底是什么鬼
10-15
Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; // 添加与Notification和Message相关的方法 Vue.prototype.$notify = ...
在vue.js中使用JSZip实现在前端解压文件的方法
10-18
首先，我们需要在Vue组件的模板中添加一个Element UI的`<el-upload>`组件，用于接收用户上传的文件。在这个例子中，我们将它配置为上传到一个示例API（//jsonplaceholder.typicode.com/posts/），并在上传前触发`...
vue.js图片转Base64上传图片并预览的实现方法
12-11
Vue.js作为一个流行的JavaScript框架，提供了丰富的功能和组件库，如Element UI，使得处理图片上传变得简单。本篇文章将详细介绍如何在Vue.js中实现图片转Base64上传并预览。 首先，让我们理解为什么需要将图片转换...
Vue ElementUI实现:限制输入框只能输入正整数的问题
10-15
this.inputValue = value.replace(/[-.]/g, ''); } else { console.log('输入正常'); } } ``` ### 方法四：正则匹配`.`或`-` 和方法二类似，但正则表达式不同，用于匹配含有小数点或减号的输入： ```...
$.ajax的回调function中的this与 element-ui的this.$alert冲突问题解决
wejack的专栏
12-09 1114
代码大致如下,vue中使用 element-ui的组件 this.alert会报错误，因于与alert会报错误，因于与alert会报错误，因于与.ajax的回调函数中的this冲突，解决方法是将this.alert的this改为vue对象的名称vm.alert的this改为vue对象的名称 vm.alert的this改为vue对象的名称vm.alert，就可以正常提示了 let vm = new Vue({ el: '#app', data: function () { re
【Vue】给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果
qq_45677671的博客
07-14 4519
给 elementUI 中的 this.$confirm、this.$alert、 this.$prompt添加按钮的加载效果
【Vue-仿照element-ui自己动手封装ui组件】—— alert、confirm 弹窗
qq_33625873的博客
03-08 2269
概述 很久之前就一直想要自己搭建一个个人博客，但下班回家的我只想做条咸鱼，这两天周末闲着没事干有想起了这件事，但从何下手？看了一下主流的几个ui框架挺好看的但大家都在用没有新鲜感，于是决定自己试着做一套试试 水平有限，用到的方法、代码实现、风格等可能比较初级，仅作为学习分享，如有大佬路过还请多多指教 实现alert和comfirm 先看效果如图 需求分析 1、要能自定义弹窗标题、消息文本，弹窗按钮文本 2、要支持全局的函数式调用，一处引入随从调用 3、弹窗组件要有比较高的权重，覆盖在顶层却不能像普通组件一
踩坑分享（ 8 ）- Vue使用this.$alert（）报错：Uncaught (in promise) TypeError: this.$alert is not a function a
烟溪彭于晏的博客
05-28 3709
Vue使用this.$alert（）报错：Uncaught (in promise) TypeError: this.$alert is not a function a
vue中使用element自定义弹出框
cqqorcq的博客
04-30 2063
1. 在main.js中全局注册定义 import { Message,MessageBox } from 'element-ui'; Vue.Message = new DonMessage() //自定义提示语弹窗 window.$dcMsg = (txt='这是提示语句',timer='2000') => { MessageBox.alert(txt, '', { ...
vue element ui this.$alert 样式修改，长词自动换行、自定义html标签无效果
热门推荐
dandanforgetlove的专栏
09-28 1万+
问题： vue alert提示框长词无法自动换行（一个连起来的词） 解决： 自定义一个class 名 this.$alert(row.content, row.title, { confirmButtonText: '确定', customClass:'message_box_alert' }); CSS： <style> /**站内信长单词强制换行 */ .message_box_alert { word-.
element-ui中this.$message用不了
05-23
如果在使用 element-ui 的时候，出现了 this.$message 无法使用的情况，可能是因为没有正确引入 Message 组件。请确保在 main.js 中正确引入了 Message 组件，例如： ``` import { Message } from 'element-ui'; Vue.prototype.$message = Message; ``` 另外，请确保在使用 this.$message 时，已经在组件中正确引入了 Vue，例如： ``` import Vue from 'vue'; export default { methods: { showMessage() { this.$message('Hello World!'); } } } ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值