当前位置：首页 > article >正文

ElMessageBox 内容自定义

article 2024/11/5 13:19:58

1. ElmessageBox弹出框显示内容设置字体颜色：

代码内容：

const saveToGroup = (row: Customers) => {
  ElMessageBox.confirm(
    h(
      "i",
      { style: "color: #409EFF" },
      "未建档客户公司无法创建线索/商机/礼品申请。"
    ),
    "是否确认去集团建档？",
    {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "info"
    }
  )
    .then(() => {
      console.log("执行操作")
    })
    .catch(() => {});
};

效果图：

2. 弹出框内容添加ElRadio选择项：

代码内容：

const confirmPop = async () => {
  const checked = ref(false);
  ElMessageBox({
    title: "提示",
    closeOnClickModal: false,
    message: () =>
      h("div", {}, [
        h(
          "p",
          { style: { "margin-bottom": "10px" } },
          "是否即将有线索/商机创建"
        ),
        h(
          ElRadioGroup,
          {
            modelValue: checked.value,
            "onUpdate:modelValue": (val: boolean) => {
              checked.value = val;
            }
          },
          () => [
            h(ElRadio, {
              value: true,
              label: "是"
            }),
            h(ElRadio, {
              value: false,
              label: "否"
            })
          ]
        )
      ])
  })
    .then(async () => {
      console.log("执行之后的操作");
    })
    .catch(() => {
      console.log("cancel");
    });
};