vue3使用Element ui plus中MessageBox消息框+radio框配合使用

想要达到的效果

首先安装element ui plus 省略~~

官网地址：

https://element-plus.gitee.io/zh-CN/component/message-box.htmlhttps://element-plus.gitee.io/zh-CN/component/message-box.html

需要用到的 引入

import { h } from "vue";
import {
  ElMessageBox,
  ElRadioGroup,
  ElRadio,
  ElIcon,
} from "element-plus";
 
<template>
  <el-button @click="open('需要下载的路径')">点击下载el-button>
template>
 
let selectedOption: any = ref(0);
function open(file_url: any) {
  let MessageBoxWithRadio = {
    render() {
      return h("div", null, [
        h("p", { style: { textAlign: "left" } }, [
          h(ElIcon, {
            name: "el-icon-warning",
            style: { color: "red" },
          }),
          h(
            "span",
            null,  // 设置内容部分样式 例：{ style: { color: "red" } }
            "此处写你的文本内容"
          ),
        ]),
        h(
          ElRadioGroup,
          {
            modelValue: selectedOption.value,
            "onUpdate:modelValue": (val) => (selectedOption.value = val),
            style: { marginRight: "280px" }, // 添加样式
          },
          () => [h(ElRadio, { label: 1 }, () => "同意该条款")]
        ),
      ]);
    },
  };
 
  ElMessageBox({
    title: "注意",
    message: h(MessageBoxWithRadio),
    showCancelButton: true,
    confirmButtonText: "确定",
    type: "warning",  // 标题的感叹号
    center: true, // 内容居中
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        if (selectedOption.value == 0) {
          return proxy.$message.warning("请先勾选同意条款！");
        }
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = "Loading...";
        done();
      } else {
        selectedOption.value = 0;
        done();
      }
    },
  })
    .then(() => {
      window.open(file_url, "_blank");
      selectedOption.value = 0;
    })
    .catch((err: any) => {
      // console.log(err);
    });
}