ElMessageBox - daniel-qa/Vue GitHub Wiki

ElMessageBox

  • 基本語法

ElMessageBox 會阻斷式對話框（需使用者操作）

ElMessageBox.confirm(message, title?, options?)
  .then(() => {
    // 使用者按下「確認」後會執行這段
  })
  .catch(() => {
    // 使用者按下「取消」或關閉視窗時會執行這段
  });

對調按鍵位置 #

使用 SCSS

Vue 專案裡只要 .vue 的 <style> 加上 lang="scss"，就可以直接寫 SCSS，不需要單獨安裝

       this.$confirm("当前集货位订单司机未装车是否释放？", "释放集货位", {
        confirmButtonText: "释放",
        cancelButtonText: "取消",
        type: "warning",
        customClass:'set_custom_class',
        closeOnClickModal: false
      }).then(()=>{
 
      })

<style lang="scss">
.set_custom_class {
  .el-message-box__btns {
    /* 第一颗按钮（也就是取消或你定义的第一个按钮） */
    .el-button:nth-child(1) {
      float: right;
    }
    /* 第二颗按钮（也就是确认按钮） */
    .el-button:nth-child(2) {
      margin-right: 10px;
      background-color: #2d8cf0;
      border-color: #2d8cf0;
    }
  }
}
</style>

P.S SCSS 是 Sass 的一種語法格式，全名是：

👉 Sassy CSS（時髦的 CSS）

它是 CSS 的超集語言，你可以把它想像成：

💬「幫 CSS 加上變數、巢狀結構、函式、運算、迴圈的版本！」

範例

ElMessageBox.confirm(
  '此操作將無法復原，確定要發送嗎？',
  '不可逆操作',
  {
    type: 'error',
    confirmButtonText: '我已確認，繼續發送',
    cancelButtonText: '取消',
    customClass: 'reverse-btn-order'
  }
)
  .then(() => {
    // 使用者按下「確認」
    console.log('已確認，開始發送！');
    // TODO: 執行發送動作
  })
  .catch(() => {
    // 使用者按下「取消」或關閉視窗
    console.log('取消發送');
    return;  // 一般會中斷程序
  });

<style scoped>
:deep(.reverse-btn-order .el-message-box__btns) {
  flex-direction: row-reverse;
}
</style>
⚠️ **GitHub.com Fallback** ⚠️