vue3+element plus中点击按钮后打开弹窗并根据参数的不同插入不同组件内容

在 Vue3 中结合 Element Plus 使用，如果你想创建一个点击按钮后动态加载不同组件的弹窗功能，你可以这样做：

首先，确保你已经安装了 Vue 和 Element Plus，并导入需要的组件库。在你的 Vue 组件里，你可以设置一个方法来处理按钮点击事件，这个方法接收一个参数，用于确定要显示的组件。

<template>
  <el-button @click="showModal(componentParam)">点击打开弹窗</el-button>
  <el-dialog v-model="dialogVisible" :width="dialogWidth">
    <component :is="currentComponent" /> <!-- 当前显示的组件 -->
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

const dialogVisible = ref(false); // 弹窗是否显示
const dialogWidth = '600px'; // 弹窗宽度
let currentComponent;

// 根据参数决定当前显示的组件
function showModal(param) {
  if (param === 'componentA') {
    currentComponent = ComponentA;
  } else if (param === 'componentB') {
    currentComponent = ComponentB;
  }
  dialogVisible.value = true; // 显示弹窗
}
</script>

在这个例子中，`showModal`函数会根据传入的 `componentParam` 参数（例如字符串 'componentA' 或 'componentB'）来切换 `currentComponent` 的值，然后通过绑定的 `v-is` 指令动态渲染对应的组件到弹窗内。