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

消息框+radio框配合使用"/>

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

想要达到的效果

首先安装element ui plus 省略~~

官网地址：

.html.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);});
}