vue项目中使用this.$confirm解析
作者:chengxue_123 时间:2024-05-02 17:02:09
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
标签:vue,this.$confirm
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Vue按回车键进行搜索的实现方式
2024-05-05 09:06:27
![](https://img.aspxhome.com/file/2023/3/130853_0s.png)
JavaScript简单编程实例学习
2024-04-29 13:24:52
Tensorflow实现在训练好的模型上进行测试
2022-10-04 07:17:00
Python实现PS图像抽象画风效果的方法
2022-10-25 14:08:42
![](https://img.aspxhome.com/file/2023/7/94697_0s.jpg)
ASP 包含文件中的路径问题和使用单一数据库连接文件的解决方案
2011-04-07 10:35:00
sql在一个表中添加字段并添加备注的方法
2024-01-26 10:16:59
SQL Server误区30日谈 第10天 数据库镜像在故障发生后 马上就能发现
2024-01-13 02:40:08
MySQL表设计优化与索引 (六)
2010-10-25 19:53:00
教你如何在Pycharm中导入requests模块
2023-05-03 13:10:14
![](https://img.aspxhome.com/file/2023/0/123480_0s.png)
将Django项目部署到CentOs服务器中
2021-07-30 20:11:11
![](https://img.aspxhome.com/file/2023/0/114530_0s.png)
Python pandas轴旋转stack和unstack的使用说明
2021-08-10 21:18:34
![](https://img.aspxhome.com/file/2023/4/120904_0s.jpg)
asp如何在读取Excel文件时创建列表的下拉菜单?
2010-06-18 19:59:00
PyTorch中apex安装方式和避免踩坑
2023-06-20 15:19:57
![](https://img.aspxhome.com/file/2023/8/61438_0s.png)
教你如何用python开发一款数字推盘小游戏
2021-11-03 23:22:14
![](https://img.aspxhome.com/file/2023/4/71404_0s.png)
python中执行shell的两种方法总结
2023-03-12 15:20:39
jQuery选择器用法实例详解
2024-04-09 19:48:41
浅谈Go切片的值修改是否会覆盖数组的值
2024-04-26 17:18:19
Python爬虫HTPP请求方法有哪些
2023-07-25 16:55:06
django基础学习之send_mail功能
2023-04-01 00:16:53
从零学python系列之从文件读取和保存数据
2021-02-11 01:51:29