Vue 和 Element Plus 弹框组件详解：从基本实现到异步数据加载与自定义内容（实战）

news2024/9/22 19:22:22

前言

主要是通过一个按钮触发一个按钮框，多种方式的逻辑，多种场景

原先通过实战总结，基本的知识推荐阅读：

详细分析Element Plus中的ElMessageBox弹窗用法（附Demo及模版）
详细分析Element中的MessageBox基本知识（附Demo）
Vue按照顺序实现多级弹窗（附Demo）
Vue以弹窗形式实现导入功能
使用 Vue 实现包含单选框的弹窗功能（附Demo）
点击按钮框来选择相应信息（Vue + Java）

此处整体文章偏向vue3的语法，对于vu2大同小异，注意语法差异即可

1. 基本知识

展示弹框内容并控制其显示是 Vue 和 Element Plus 中常见的需求

弹框组件 (el-dialog):
el-dialog 是 Element Plus 提供的对话框组件，用于弹出层展示信息
使用 v-model 或 v-model:visible 来控制对话框的显示和隐藏
可以通过插槽自定义对话框的内容和底部按钮

Vue 组件通信:
Props：父组件向子组件传递数据
Emits：子组件向父组件传递事件或数据
v-model：用于双向绑定数据

方法:

使用异步方法（async/await）获取数据
更新组件状态（如弹框的显示状态）以展示或隐藏内容

2. 模版

参照模版感受对应的需求

在最基本的实现中，可以使用 el-dialog 组件并通过 v-model 控制其显示和隐藏

组件代码 (BasicDialog.vue)

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开对话框</el-button>
    <el-dialog
      v-model:visible="dialogVisible"
      title="基本对话框"
      width="50%"
    >
      <p>这是一个基本的对话框。</p>
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dialogVisible = ref(false);

const showDialog = () => {
  dialogVisible.value = true;
};
</script>

传递数据到对话框

<template>
  <div>
    <el-button type="primary" @click="showDataDialog">查看数据</el-button>
    <el-dialog
      v-model:visible="dataDialogVisible"
      title="数据对话框"
      width="50%"
    >
      <p>{{ dialogContent }}</p>
      <template #footer>
        <el-button @click="dataDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const dataDialogVisible = ref(false);
const dialogContent = ref('这是传递的数据内容');

const showDataDialog = () => {
  dataDialogVisible.value = true;
};
</script>

异步数据加载

通过按钮点击触发对话框显示，并从后端获取数据并显示

<template>
  <div>
    <el-button type="primary" @click="fetchDataAndShowDialog">获取数据并显示</el-button>
    <el-dialog
      v-model:visible="asyncDialogVisible"
      title="异步数据对话框"
      width="50%"
    >
      <p>{{ asyncData }}</p>
      <template #footer>
        <el-button @click="asyncDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AppointmentCommissionApi from '@/api/AppointmentCommissionApi'; // 替换为实际路径

const asyncDialogVisible = ref(false);
const asyncData = ref('');

const fetchDataAndShowDialog = async () => {
  try {
    const response = await AppointmentCommissionApi.getData();
    asyncData.value = response.data; // 假设返回的数据在 data 字段中
    asyncDialogVisible.value = true;
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};
</script>

自定义对话框内容
可以通过插槽 (slot) 自定义对话框内容，如自定义表单或详细信息展示

<template>
  <div>
    <el-button type="primary" @click="showCustomDialog">打开自定义对话框</el-button>
    <el-dialog
      v-model:visible="customDialogVisible"
      title="自定义内容对话框"
      width="50%"
    >
      <template #default>
        <el-form :model="form">
          <el-form-item label="名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <el-button @click="customDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const customDialogVisible = ref(false);
const form = ref({
  name: '',
  description: ''
});

const showCustomDialog = () => {
  customDialogVisible.value = true;
};

const handleSubmit = () => {
  console.log('提交的表单数据:', form.value);
  customDialogVisible.value = false;
};
</script>

3. 实战

通过基本的知识点以及Demo模版大致知道逻辑步骤

在做审批过程中，审批不通过，客户查询后端原因，出现弹框结果

在这里插入图片描述

基本的功能组件如下：

<template>
  <el-dialog :model-value="visible" title="不通过原因" width="50%" @close="handleClose">
    <p>{{ rejectionReason }}</p>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  rejectionReason: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:modelValue']);

const visible = ref(props.modelValue);

watch(() => props.modelValue, (newVal) => {
  visible.value = newVal;
});

const handleClose = () => {
  emit('update:modelValue', false);
};
</script>

在父组件中使用 RejectionReasonDialog，并进行相应的弹框控制和数据处理

<template>
  <div>
    <!-- 查看不通过原因按钮 -->
    <el-button
      link
      type="primary"
      @click="showRejectionReason(scope.row.id)"
      v-if="scope.row.appointmentStatus === '审批不通过'"
      v-hasPermi="['dangerous:appointment-commission:query']"
    >
      查看原因
    </el-button>

    <!-- 不通过原因对话框 -->
    <RejectionReasonDialog
      v-model:modelValue="isReasonDialogVisible"
      :rejectionReason="rejectionReason"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AppointmentCommissionApi from '@/api/AppointmentCommissionApi'; // 替换为实际路径
import RejectionReasonDialog from '@/components/RejectionReasonDialog.vue'; // 替换为实际路径

const isReasonDialogVisible = ref(false);
const rejectionReason = ref('');

const showRejectionReason = async (id: number) => {
  try {
    const response = await AppointmentCommissionApi.getAppointmentCommission(id);
    rejectionReason.value = response.approvalReason || '无理由'; // 确保有默认值
    isReasonDialogVisible.value = true; // 显示对话框
  } catch (error) {
    console.error('获取不通过原因失败:', error);
  }
};
</script>

基本的解释如下：

RejectionReasonDialog 组件：
使用 :model-value="visible" 绑定控制对话框的显示
使用 rejectionReason 作为对话框内容
父组件：
通过 showRejectionReason 方法调用 API 并更新 rejectionReason
通过 isReasonDialogVisible 控制对话框的显示
数据绑定：
v-model:modelValue 用于双向绑定对话框的显示状态
:rejectionReason 传递不通过原因到对话框组件