新思想对话框封装方案

更新: 2025/3/23 21:17:11 字数: 0 字

需求分析

需求

1. 对于简单的后台管理系统来说，新增数据的方式基本上都是通过弹出对话框来收录数据。
2. 一个 vue 文件中既有列表的渲染，又有数据的录入，这样，会导致代码的变的很多，而且比较难维护。
3. 将对话框封装成组件，对外暴露对应的方法，然后，在页面中，通过调用方法，来展示对话框的不同状态。

实现方案

注意：这里的实现方案，是基于 vue3.x setup 来实现的，组件库是 element-plus。

1. 定义对话框组件 <MenuDialog/>，对话框组件暴露两个方法，一个用于新增，一个用于编辑。

<script setup>
  const dialogVisible = ref(false)
  const openAdd = () => {
    // 初始化操作
    // ...
    dialogVisible.value = true
  }
  
  const openEdit = (data) => {
      // 初始化操作
    
    dialogVisible.value = true
  }
  
  defineExpose({
    openAdd,
    openEdit
  })
</script>
<template>
  <el-dialog v-model="dialogVisible" title="新增">
    <el-form>
    </el-form>
  </el-dialog>
</template>

2. 在页面中，通过 ref 来获取对话框组件，然后，调用对话框组件的方法，来展示对话框的不同状态。

<script setup>
  const MenuDialogRef = ref(null)
  const add = () => {
    MenuDialogRef.value.open()
  }
</script>
<template>
  <MenuDialog  ref="MenuDialogRef"></MenuDialog>
</template>

优点

优点

最大的优点就是封装了对话框部分的逻辑，避免了重复的代码，并且可以提高维护的效率。