Vue3+Element Plus實現(xiàn)自定義彈窗組件的全屏功能

更新時間：2024年07月17日 08:50:43 作者：陽光的男夾克

在現(xiàn)代化的前端開發(fā)中,彈窗組件是提升用戶體驗的重要元素,本文將介紹如何使用 Vue 3 和 Element Plus 庫來創(chuàng)建一個具有全屏功能的自定義彈窗組件,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下

組件概述

我們將構(gòu)建一個名為 Dialog 的 Vue 組件，該組件具備以下特性：

自定義頭部，包括全屏和關(guān)閉按鈕
支持全屏和還原功能
可配置的彈窗尺寸和位置
拖拽功能（可選）
動態(tài)內(nèi)容區(qū)域高度

以下是實現(xiàn)自定義彈窗組件的詳細步驟和代碼示例。

組件實現(xiàn)

1. 組件模板

我們使用 el-dialog 作為基礎(chǔ)組件，并自定義了 header 插槽以添加全屏按鈕和關(guān)閉圖標。

<template>
  <el-dialog
    :dialogHeight="dialogHeight"
    :title="dialogTitle"
    class="dialog min-w-70"
    v-model="dialogVisible"
    append-to-body
    :modal="dialogModal"
    :fullscreen="fullscreen"
    :close-on-click-modal="dialogClickModalClose"
    :draggable="dialogDraggable"
    :show-close="false"
    :width="dialogWidth"
    :align-center="dialogAlignCenter"
    :center="dialogContentCenter"
    @open="open"
    @close="close"
  >
    <template #header>
      <div class="flex justify-between items-content">
        <div class="titleClass">{{ dialogTitle }}</div>
        <div class="icon-content">
          <!-- <el-icon class="single-uploader__icon text-[12px]">
              <i-ep-minus v-if="fullscreen" />
              <i-ep-plus v-else />
            </el-icon>-->
          <div :title="!fullscreen ? '全屏' : '還原'">
            <svg-icon
              class="icon-item-content"
              v-if="showExpand"
              @click="zoom"
              :icon-class="fullscreen ? 'fullscreen-exit' : 'fullscreen'"
            />
          </div>
          <div title="關(guān)閉">
            <el-icon
              v-if="showClose"
              @click="close"
              title="關(guān)閉"
              class="single-uploader__icon icon-item-content"
            >
              <i-ep-close />
            </el-icon>
          </div>
        </div>
      </div>
    </template>
    <div :style="{ height: dialogBodyHeight }" class="overflow-auto">
      <slot></slot>
    </div>
    <template #footer v-if="dialogFooterBtn">
      <el-button type="primary" @click="SaveSubmit">確 定</el-button>
      <el-button @click="CloseSubmit">取 消</el-button>
    </template>
  </el-dialog>
</template>

2. 組件腳本

在腳本部分，我們定義了組件的 props、slots 和 emits，以及一些必要的響應式數(shù)據(jù)和函數(shù)。

<script setup lang="ts">
// 【接口】接受傳參字段
interface IProps {
  // 是否顯示 Dialog
  visible: boolean;
  // 對話框的標題
  dialogTitle?: string;
  // 內(nèi)容區(qū)域高度
  dialogHeight?: string;
  // 對話框的寬度
  dialogWidth?: string;
  // 是否需要遮罩層
  dialogModal?: boolean;
  // 是否水平垂直對齊對話框
  dialogAlignCenter?: boolean;
  // 是否讓 Dialog 的 header 和 footer 部分居中排列
  dialogContentCenter?: boolean;
  // 是否可以通過點擊 modal 關(guān)閉 Dialog
  dialogClickModalClose?: boolean;
  // 為 Dialog 啟用可拖拽功能
  dialogDraggable?: boolean;
  // 是否顯示底部按鈕
  dialogFooterBtn?: boolean;
  // 是否顯示全屏按鈕
  showExpand?: boolean;
  // 是否顯示關(guān)閉按鈕
  showClose?: boolean;
}

// 初始化默認參數(shù)
const props = withDefaults(defineProps<IProps>(), {
  dialogTitle: "默認標題",
  dialogWidth: "40%",
  dialogHeight: "auto",
  dialogModal: true,
  dialogAlignCenter: false,
  dialogContentCenter: false,
  dialogClickModalClose: false,
  dialogDraggable: false,
  dialogFooterBtn: true,
  showExpand: false,
  showClose: true,
});

const emit = defineEmits([
  "save",
  "cancellation",
  "open",
  "close",
  "zoom",
  "update:visible",
]);

const dialogVisible = useVModel(props, "visible", emit);
let fullscreen = ref(false);
const dialogBodyHeight = ref<string | number>(); // 初始值為字符串類型

// watch監(jiān)聽
watch(
  [() => props.visible, () => props.dialogHeight, () => props.dialogFooterBtn],
  () => {
    nextTick(() => {
      menuDialogZoom();
    });
  },
  { deep: true, immediate: true }
);

// 保存提交回調(diào)函數(shù)
const SaveSubmit = () => {
  emit("save"); //emit方法供父級組件調(diào)用
};

// 取消保存回調(diào)函數(shù)
const CloseSubmit = () => {
  emit("cancellation"); //emit方法供父級組件調(diào)用
};

// 打開事件回調(diào)函數(shù)
const open = () => {
  emit("open"); //emit方法供父級組件調(diào)用
};

// 關(guān)閉事件回調(diào)函數(shù)(當顯示頭部關(guān)閉按鈕時需調(diào)用該回調(diào)函數(shù)方法 -> dialogShowClose = true 反之)
const close = () => {
  emit("close"); //emit方法供父級組件調(diào)用
};

// 縮放彈窗
const zoom = () => {
  fullscreen.value = !fullscreen.value;
  menuDialogZoom();
  console.log(fullscreen.value);
  emit("zoom", fullscreen.value); //emit方法供父級組件調(diào)用
};

/* 分配權(quán)限縮放彈窗 */
const menuDialogZoom = () => {
  if (props.visible && fullscreen.value && props.dialogFooterBtn) {
    dialogBodyHeight.value = "calc(100vh - 120px)";
  } else if (props.visible && fullscreen.value && !props.dialogFooterBtn) {
    dialogBodyHeight.value = "calc(100vh - 80px)";
  } else {
    dialogBodyHeight.value = props.dialogHeight;
  }
};
</script>

3. 組件樣式

<style scoped>
.titleClass {
  font-weight: bold;
}

.icon-content {
  display: flex;
  align-items: center;
}

.icon-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.icon-item-content:nth-child(1) {
  margin-right: 10px;
}

.icon-item-content:hover {
  color: #1f6feb;
  cursor: pointer;
}

.single-uploader__icon {
  font-size: 18px;
}
</style>

4. 使用案例

以下是如何在父組件中使用 Dialog 組件的示例，包括如何傳遞參數(shù)和處理事件。

<Dialog
	dialogHeight="350px"
	v-model:visible="menuDialogVisible"
	:dialogTitle="'【' + checkedRole.name + '】權(quán)限分配'"
	:dialogDraggable="true"
	dialogWidth="30%"
	@close="menuDialogVisible = false"
	@save="handleRoleMenuSubmit"
	@cancellation="menuDialogVisible = false"
>
	內(nèi)容區(qū)域
</Dialog>

5. 彈窗相關(guān)數(shù)據(jù)

定義了控制彈窗顯示的響應式數(shù)據(jù)。

let menuDialogVisible = ref(false);

關(guān)鍵功能實現(xiàn)

自定義頭部

我們通過 header 插槽來自定義彈窗的頭部，增加了全屏切換按鈕和關(guān)閉按鈕。

<template #header>
  <!-- 省略部分代碼，詳見完整代碼示例 -->
</template>

全屏和還原功能

通過點擊全屏按鈕，我們可以切換彈窗的全屏狀態(tài)。這一功能通???修改 fullscreen 響應式數(shù)據(jù)實現(xiàn)。

const zoom = () => {
  fullscreen.value = !fullscreen.value;
  menuDialogZoom();
  emit("zoom", fullscreen.value);
};

動態(tài)內(nèi)容區(qū)域高度

根據(jù)彈窗的全屏狀態(tài)和是否顯示底部按鈕，我們動態(tài)計算內(nèi)容區(qū)域的高度。

const menuDialogZoom = () => {
  // 省略部分代碼，詳見完整代碼示例
};

結(jié)論

通過以上步驟，我們創(chuàng)建了一個功能豐富、高度可配置的自定義彈窗組件。這個組件可以根據(jù)實際需求調(diào)整尺寸、位置和內(nèi)容，非常適合在復雜的應用場景中使用。希望這篇文章能幫助您在項目中更好地利用 Vue 3 和 Element Plus 庫。如果您有任何疑問或建議，歡迎在評論區(qū)留言交流。

以上就是Vue3+Element Plus實現(xiàn)自定義彈窗組件的全屏功能的詳細內(nèi)容，更多關(guān)于Vue3 Element Plus彈窗組件全屏的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: