想要达到的效果
首先安装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);});
}