一、概述
在执行删除操作时，我们一般会添加一个删除确认框，当用户点击确认删除后在执行删除操作，这样能提升用用户体验， 那么该如何快速实现呢？element中提供了相应的确认框，在官方文档中不太好找，其实在message box弹框中， 有一个确认消息
二、代码实现
test.vue
代码语言：javascript复制<template>
<div style="width: 100%">
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
<style>
</style>访问页面，效果如下：
本文参考链接：
https://element.eleme.io/#/zh-CN/component/message-box
