vue?elementUI之this.$confirm的使用方式

更新時間：2023年08月21日 14:26:52 作者：＊且聽風吟

這篇文章主要介紹了vue?elementUI之this.$confirm的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue elementUI之this.$confirm的使用

當進行一些操作時，有時需要彈出一些確定信息，

一般有兩種形式：提示框和確認框。

通常為一個確定動操作，一個取消操作，如下：

this.$confirm(`您確定刪除嗎?`, '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 確定操作
        }).catch(() => {
          // 取消操作
          this.$message({
            type: 'info',
            message: '已取消'
          })
})

頁面效果：

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

有時候，兩個按鈕都需要執(zhí)行觸發(fā)動作，如下：

this.$confirm(`審核通過?`, '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '通過',
        cancelButtonText: '不通過',
        type: 'warning'
      }).then(() => {
        console.log('確定操作')
      }).catch(action => {
        // 判斷是 cancel (自定義的取消) 還是 close （關(guān)閉彈窗）
        if (action === 'cancel') {
          noPassAudit({ id: id }).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()
            }
          })
        }
})

頁面效果：

如果將 distinguishCancelAndClose 屬性設(shè)置為 true ，則當用戶點擊取消按鈕觸發(fā)取消和點擊關(guān)閉按鈕或遮罩層、按下 ESC 鍵觸發(fā)關(guān)閉時，兩種行為的參數(shù)分別為 ‘cancel’ 和 ‘close’ ，這樣就可以在 catch 中拿到回調(diào)參數(shù) action 進行判斷做什么操作了。

注意：如果沒有設(shè)置 distinguishCancelAndClose 為 true ，則兩種行為都默認為取消。

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.message了。

比如：你想用MessageBox中的confirm方法，現(xiàn)在可以這樣用：

<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('確認關(guān)閉？')
          .then(_ => {
            done()
          })
          .catch(_ => {
          })
      }
    }
  }
</script>