欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例

 更新時(shí)間:2024年02月23日 14:41:48   作者:熱愛Java,熱愛生活  
頁面中會(huì)有很多時(shí)候需要彈窗提示,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置提示和警告彈出框的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

案例1:

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

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

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

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

如果分類下沒有資源,則直接通過`ElMessageBox`彈出確認(rèn)框,讓用戶確認(rèn)是否要?jiǎng)h除該分類。如果用戶確認(rèn),也會(huì)執(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('該分類已經(jīng)分配資源,不可修改!', '提示', {
        type: 'warning',
        confirmButtonText: '確認(rèn)'
      });
      return;
    } else {
      dialogParam.type = row.type;
      caGroupTreeSelect(id);
      getCaGroupDetails(id).then(response => {
        caGroupForm.value = response.data;
        dialogParam.open = true;
        dialogParam.title = "修改分類";
      });
    }
  });
};

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

總結(jié) 

到此這篇關(guān)于Vue設(shè)置提示和警告彈出框的文章就介紹到這了,更多相關(guān)Vue設(shè)置提示和警告彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論