vue项目中使用this.$confirm解析
作者:chengxue_123 发布时间:2024-05-02 17:02:09
标签:vue,this.$confirm
vue使用this.$confirm
首先在element-ui中的el-table下的el-table-column中引入插槽(相当于占位符)
?<template slot-scope="scope">
? ? ? ? ? ? <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
? ? ? ? ? ? ? >编辑</el-button
? ? ? ? ? ? >
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="danger"
? ? ? ? ? ? ? @click="handleDelete(scope.$index, scope.row)"
? ? ? ? ? ? ? >删除</el-button
? ? ? ? ? ? >
? ? ? ? ? </template>
?handleDelete(index, item) {
? ? ? this.$confirm("你确定要删除吗,请三思,后果自负", {
? ? ? ? confirmButtonText: "确定",
? ? ? ? cancelButtonText: "取消",
? ? ? ? type: "warning",
? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? console.log("确定了,要删除");
? ? ? ? })
? ? ? ? .catch(() => {
? ? ? ? ? console.log("放弃了");
? ? ? ? });
? ? },
此时,需要在main.js中注册组件
import {MessageBox} from 'element-ui';
//Vue.use(MessageBox);//与其他引用不同的是,这里“不能”加Vue.use(MessageBox),不然会出现问题,达不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;
vue TypeError: this.$confirm is not a function
错误
在使用element ui,采用局部引入时候,报错TypeError: this.$confirm is not a function。
因为没有在vue的实例上挂载confirm和message导致的报错
解决方案
修改element.js文件:
1.引入messageBox 插件
import {MessageBox} from ‘element-ui'
2.在vue 的原型对象上挂载confirm
Vue.prototype.$confirm = MessageBox.confirm
如下图所示:
以后就可以放心的在vue中的任何文件使用this.confirm或者this.confirm或者this.message了。比如:你想用MessageBox中的confirm方法,现在可以这样用:
<template>
<div>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
dialogVisible: false
}
},
methods: {
handleClose (done) {
const _this = this
_this.$confirm('确认关闭?')
.then(_ => {
done()
})
.catch(_ => {
})
}
}
}
</script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持asp之家。
来源:https://blog.csdn.net/chengxue_123/article/details/109395935
0
投稿
猜你喜欢
- 公司安排了个任务,爬取ppt资源,我爬取后打开ppt发现,最后一页是站点的宣传,需要删除。仔细阅读了python-pptx的api和国内的教
- 今天有业务需要制作用户头像的需求,在网上找了个可以裁剪大图制作自己希望大小的图片的方法(基于Struts2)。特此记录一下。不废话,具体的步
- 如何导入SQL数据库如何将现成的数据库导入到MySQL中?有两种方式:通过终端命令行语句导入:mysql> source SQL文件的
- 代码及注释如下#Auther Bob#--*--conding:utf-8 --*--#生产者消费者模型,这里的例子是这样的,有一个厨师在做
- 代码为:import matplotlib.pyplot as plt #用于显示图片import matplotlib.image as
- php获取图片的exif信息,php自带一个exif_read_data函数可以用来读取图片的exif信息,代码来自php手册<?ph
- 本文主要向大家分享了Python编程中通过Django模块实现用户注册以及邮箱验证功能的简单介绍及代码实现,具体如下。用户注册:类似于用户登
- 今天编ZBlog上传模块的时候,需要用到一个提取文章中文件名的子程,开始我把问题想复杂了,匹配了所有可能的文件名,不仅正则表达
- 在django项目根目录位置创建scrapy项目,django_12是django项目,ABCkg是scrapy爬虫项目,app1是djan
- 前言在开发工作中,我们经常需要用到日期与时间,如:作为日志信息的内容输出计算某个功能的执行时间用日期命名一个日志文件的名称记录或展示某文章的
- 前言正则表达式是对字符串提取的一套规则,我们把这个规则用正则里面的特定语法表达出来,去匹配满足这个规则的字符串。正则表达式具有通用型,不仅p
- 本文实例讲述了Python实现的手机号归属地相关信息查询功能。分享给大家供大家参考,具体如下:根据指定的手机号码,查询其归属地等相关信息,P
- 大家通过手机自带浏览器打开百度、淘宝,在首页加载完毕后,会自动隐藏页面上方的地址栏,加之这些网站针对手机浏览器做了优化,乍看之下,还真难区分
- 一、bs4解析import requestsfrom bs4 import BeautifulSoupimport datetimeif _
- 有时我们有很多文件(如图片),我们需要对每一个文件进行操作。 我们还需要一份文件的名字来进行遍历,这时我们首先需要建立一份文件名单,有时还会
- 我要坦白一点。尽管我是一个应用相当广泛的公共域 Python 库的创造者,但在我的模块中引入的单元测试是非常不系统的。实际上,那些测试大部分
- 尽管Python事实上并不是一门纯函数式编程语言,但它本身是一门多范型语言,并给了你足够的自由利用函数式编程的便利。函数式风格有着各种理论与
- 内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。正好这几天公司不忙,学校又没有事情,所以想抽空架一个个
- 本文实例讲述了Python实现读写sqlite3数据库并将统计数据写入Excel的方法。分享给大家供大家参考,具体如下: src
- 之前因为项目的原因需要使用Oracle数据库,由于时间有限没办法从基础开始学习,而且oracle操作的命令界面又太不友好,于是就找到了PL/