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

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

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

element插件this.$confirm用法

場(chǎng)景：彈出框的兩個(gè)按鈕都能分別請(qǐng)求接口

最簡(jiǎn)單的彈出框就是“確定”“取消”，一般用戶點(diǎn)擊確定才會(huì)繼續(xù)接下來(lái)的動(dòng)作，點(diǎn)擊取消則不做任何動(dòng)作（即不會(huì)請(qǐng)求接口）。

如：

<template>
? <el-button type="text" @click="open">點(diǎn)擊打開(kāi) 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>

兩個(gè)按鈕都請(qǐng)求，則：

//任務(wù)下線
?offline(data){
? ? ?this.$confirm('是否開(kāi)啟保存點(diǎn)？', {
? ? ? ? ?distinguishCancelAndClose: true,
? ? ? ? ?confirmButtonText: '是',
? ? ? ? ?cancelButtonText: '否', //相當(dāng)于 取消按鈕
? ? ? ? ?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()
? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ?})
? ? ? ? ?}
? ? ?})

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

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

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

vue項(xiàng)目如何使用this.$confirm

首先在element-ui中的el-table下的el-table-column中引入插槽（相當(dāng)于占位符）

?<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("你確定要?jiǎng)h除嗎，請(qǐng)三思,后果自負(fù)", {
? ? ? ? confirmButtonText: "確定",
? ? ? ? cancelButtonText: "取消",
? ? ? ? type: "warning",
? ? ? })
? ? ? ? .then(() => {
? ? ? ? ? console.log("確定了，要?jiǎng)h除");
? ? ? ? })
? ? ? ? .catch(() => {
? ? ? ? ? console.log("放棄了");
? ? ? ? });
? ? },

此時(shí)，需要在main.js中注冊(cè)組件

import {MessageBox} from 'element-ui';

// Vue.use(MessageBox);//與其他引用不同的是，這里“不能”加Vue.use(MessageBox),不然會(huì)出現(xiàn)問(wèn)題，達(dá)不到想要的效果
Vue.prototype.$confirm = MessageBox.confirm;

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

您可能感興趣的文章: