Vue設置提示和警告彈出框實戰(zhàn)案例

更新時間：2024年02月23日 14:41:48 作者：熱愛Java，熱愛生活

頁面中會有很多時候需要彈窗提示,下面這篇文章主要給大家介紹了關于Vue設置提示和警告彈出框的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

案例1:

const handleDelete = (index, row) => {
  if (!isEmptyList(row.children)) {
    ElMessageBox.confirm('該分類下存在子分類，不可刪除！', '提示', {
      type: 'warning',
      confirmButtonText: '確認'
    });
    return;
  }
  const id = row.groupId;
  selectResource(id).then(response => {
    if (!isEmptyList(response.data)) {
      ElMessageBox.confirm('該分類下已經分配資源，確定要刪除嗎?', "警告", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteGroup(id);
      });
    } else {
      ElMessageBox.confirm('確認刪除名稱為"' + row.groupName + '"的數(shù)據(jù)項?', "警告", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return deleteGroup(id);
      });
    }
  });
};

這段代碼是一個函數(shù)，名為`handleDelete`，接受兩個參數(shù)：`index`和`row`。主要用于處理分類數(shù)據(jù)的刪除操作。

函數(shù)首先判斷該分類是否存在子分類，如果存在則不允許刪除，并通過`ElMessageBox`彈出提示框，提醒用戶不可刪除。

如果分類下沒有子分類，該函數(shù)會檢查該分類是否已經分配了資源。如果已經分配了資源，則通過`ElMessageBox`彈出確認框，讓用戶確認是否要刪除該分類及其下屬所有資源。如果用戶確認，會執(zhí)行`deleteGroup`函數(shù)，將該分類從數(shù)據(jù)庫中刪除。

如果分類下沒有資源，則直接通過`ElMessageBox`彈出確認框，讓用戶確認是否要刪除該分類。如果用戶確認，也會執(zhí)行`deleteGroup`函數(shù)，將該分類從數(shù)據(jù)庫中刪除。

總之，這段代碼主要完成了分類數(shù)據(jù)的刪除操作，需要依賴`ElMessageBox`組件和`deleteGroup`函數(shù)。

案例2：

const handleEdit = (index, row) => {
  resetForm();
  const id = row.groupId;
  selectResource(id).then(response => {
    if (!isEmptyList(response.data)) {
      ElMessageBox.confirm('該分類已經分配資源，不可修改！', '提示', {
        type: 'warning',
        confirmButtonText: '確認'
      });
      return;
    } else {
      dialogParam.type = row.type;
      caGroupTreeSelect(id);
      getCaGroupDetails(id).then(response => {
        caGroupForm.value = response.data;
        dialogParam.open = true;
        dialogParam.title = "修改分類";
      });
    }
  });
};

這段代碼定義了一個名為handleEdit的函數(shù),它有兩個參數(shù)：index和row。在函數(shù)內部，resetForm()函數(shù)會重置一個表單。然后，使用row.groupId作為參數(shù)調用了一個名為selectResource的函數(shù)，該函數(shù)的返回值是一個Promise對象。在Promise對象的回調函數(shù)中，使用了一個名為isEmptyList的函數(shù)來檢查response.data是否是一個空列表。如果response.data不是一個空列表，那么會顯示一個帶有警告圖標的提示框，告訴用戶該分類已經分配資源，不可修改。如果response.data是一個空列表，則會將dialogParam.type設置為row.type，調用caGroupTreeSelect函數(shù)，并使用id作為參數(shù)調用getCaGroupDetails函數(shù)。getCaGroupDetails函數(shù)會返回一個Promise對象，其回調函數(shù)會將response.data的值賦給caGroupForm.value，打開一個名為dialogParam的對話框，將其標題設置為"修改分類"。