前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)

更新時間：2024年01月24日 08:23:36 作者：Vamp_Piece

最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關資料,需要的朋友可以參考下

一、應用場景

應用場景：需要點擊按鈕后彈出第一層對話框，在第一層對話框中填寫內(nèi)容后，再點擊確認彈出第二層對話框，且需將第一層填入的內(nèi)容傳遞給第二層，再第二層時彈出提示，再通過點擊第二層的確認按鈕進行請求接口，將第一層的內(nèi)容傳遞給后端

二、代碼實現(xiàn)

<template>
  <table>
    <template #action>
      <el-button type="success" @click="outerVisible = true">
        修改備注
      </el-button>
    </template>
  </table>

  <el-dialog v-model="outerVisible" title="提示" draggable width="520px">
    <!-- #default：自定義內(nèi)容均可寫在此處 -->
    <template #default>
      <!-- 這里的el-form是外層dialog中的表單 -->
      <el-form label-width="100px" :model="note">
        <el-form-item label="備注" prop="note">
          <el-input v-model="note" />
        </el-form-item>
      </el-form>
      <!-- 內(nèi)嵌的dialog -->
      <el-dialog
        v-model="innerVisible"
        width="30%"
        title="提示"
        append-to-body
        draggable
      >
        <span>請確認是否發(fā)送數(shù)據(jù)?</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeAllDialog">關閉</el-button>
            <el-button type="primary" @click="saveConfirm"> 確認 </el-button>
          </div>
        </template>
      </el-dialog>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">{{
          t('global.action.close')
        }}</el-button>
        <el-button type="primary" @click="innerVisible = true">
          {{ t('global.action.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { Data, sendData } from '@/services/listData';

interface ViewState {
  selectedOrders: Data[];
  note: string;
  outerVisible: boolean;
  innerVisible: boolean;
}

export default defineComponent({
  name: 'list',
  components: {},
  setup() {
    const state = reactive<ViewState>({
      note: '',
      outerVisible: false,
      innerVisible: false,
    });

    // 關閉內(nèi)層對話框的同時也關閉外層的對話框
    function closeAllDialog() {
      // 關閉內(nèi)層的對話框
      state.innerVisible = false;
      // 關閉外層的對話框
      state.outerVisible = false;
    }

    function saveConfirm() {
      // 所勾選的id
      const selectedIds = selection.value.map(i => {
        return i.id;
      });
      // 這里寫請求接口的邏輯
      sendData(selectedIds, state.note)
        .then(() => {
          ElMessage({
            type: 'success',
            message: '發(fā)送成功',
          });
        })
        .finally(() => {
          state.innerVisible = false;
          state.outerVisible = false;
        });
    }

    return {
      ...toRefs(state),
      saveConfirm,
      closeAllDialog,
    };
  },
});
</script>

<style scoped lang="scss"></style>