vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)

更新時間：2022年10月08日 11:12:04 作者：ppandpp

這篇文章主要介紹了vue element插件this.$confirm用法及說明(取消也可以發(fā)請求)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element插件this.$confirm用法

場景：彈出框的兩個按鈕都能分別請求接口

最簡單的彈出框就是“確定”“取消”，一般用戶點擊確定才會繼續(xù)接下來的動作，點擊取消則不做任何動作（即不會請求接口）。

如：

<template>
? <el-button type="text" @click="open">點擊打開 Message Box</el-button>
</template>

<script>
? export default {
? ? methods: {
? ? ? open() {
? ? ? ? this.$confirm('此操作將永久刪除該文件, 是否繼續(xù)?', '提示', {
? ? ? ? ? confirmButtonText: '確定',
? ? ? ? ? cancelButtonText: '取消',
? ? ? ? ? type: 'warning'
? ? ? ? }).then(() => {
? ? ? ? ? this.$message({
? ? ? ? ? ? type: 'success',
? ? ? ? ? ? message: '刪除成功!'
? ? ? ? ? });
? ? ? ? }).catch(() => {
? ? ? ? ? this.$message({
? ? ? ? ? ? type: 'info',
? ? ? ? ? ? message: '已取消刪除'
? ? ? ? ? }); ? ? ? ? ?
? ? ? ? });
? ? ? }
? ? }
? }
</script>

兩個按鈕都請求，則：

//任務(wù)下線
?offline(data){
? ? ?this.$confirm('是否開啟保存點？', {
? ? ? ? ?distinguishCancelAndClose: true,
? ? ? ? ?confirmButtonText: '是',
? ? ? ? ?cancelButtonText: '否', //相當于 取消按鈕
? ? ? ? ?type: 'warning'
? ? ?}).then(() => {
? ? ? ? ?api.taskOffline({taskId: data.taskId, isSavepoint: '1'}).then(res => {
? ? ? ? ? ? ?if (res.data.code === "100") {
? ? ? ? ? ? ? ? ?this.$message({type: 'success', message: '下線成功!'})
? ? ? ? ? ? ? ? ?this.getTableData()
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?this.$message({type: 'error', message: res.data.msg})
? ? ? ? ? ? ? ? ?this.getTableData()
? ? ? ? ? ? ?}
? ? ? ? ?})
? ? ?}).catch(action => {
? ? ?//判斷是 cancel (自定義的取消) 還是 close （關(guān)閉彈窗）
? ? ? ? ?if (action === 'cancel'){
? ? ? ? ? ? ?api.taskOffline({taskId: data.taskId, isSavepoint: '0'}).then(res => {
? ? ? ? ? ? ? ? ?if (res.data.code === "100") {
? ? ? ? ? ? ? ? ? ? ?this.$message({type: 'success', message: '下線成功!'})
? ? ? ? ? ? ? ? ? ? ?this.getTableData()
? ? ? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ? ? ?this.$message({type: 'error', message: res.data.msg})
? ? ? ? ? ? ? ? ? ? ?this.getTableData()
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?})
? ? ? ? ?}
? ? ?})

默認情況下，當用戶觸發(fā)取消（點擊取消按鈕）和觸發(fā)關(guān)閉（點擊關(guān)閉按鈕或遮罩層、按下 ESC 鍵）時，Promise 的 reject 回調(diào)和callback回調(diào)的參數(shù)均為 ‘cancel’（普通彈出框中的點擊取消時的回調(diào)參數(shù)）。

如果將distinguishCancelAndClose屬性設(shè)置為 true，則上述兩種行為的參數(shù)分別為 ‘cancel’ 和 ‘close’。（注意：如果沒有設(shè)置distinguishCancelAndClose為true，則都默認為取消）

這樣就可以在catch中拿到回調(diào)參數(shù)action進行判斷做什么操作了

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),不然會出現(xiàn)問題，達不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: