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

这篇具有很好参考价值的文章主要介绍了vue3使用Element ui plus中MessageBox消息框+radio框配合使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

想要达到的效果

elementplus 如何使用$msgbox,1024程序员节

首先安装element ui plus 省略~~

官网地址：

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

需要用到的引入文章来源地址https://www.toymoban.com/news/detail-793892.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);
    });
}

到了这里，关于vue3使用Element ui plus中MessageBox消息框+radio框配合使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！