vue3实现alert自定义的plugins方式

<template>
  <div class="default-message">
    <div class="default-message-content">
      <div class="default-message-title">{{title}}</div>
      <div class="default-message-value" v-html="content"></div>
      <div class="default-message-btns">
        <div class="default-message-cancle default-message-btn"
          v-if="cancletext" :style="setcanclecolor()"
          @click.prevent.stop="handlecancel">
          {{cancletext}}
        </div>
        <div class="default-message-submit default-message-btn"
          :style="setokcolor()" @click.prevent.stop="handleok">
          {{oktext}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { definecomponent } from "vue";
export default definecomponent({
  name: "message",
  props: {
    // 标题
    title: {
      type: string,
      default: "提示",
    },
    // 内容
    content: {
      type: string,
      default: "",
      required: true,
    },
    // 确定按钮文字
    oktext: {
      type: string,
      default: "确定",
    },
    // 确定按钮文字颜色
    oktextcolor: {
      type: string,
      default: "#26a2ff",
    },
    // 取消按钮文字
    cancletext: {
      type: string,
      default: "",
    },
    // 取消按钮文字颜色
    cancletextcolor: {
      type: string,
      default: "#999",
    },
    // 成功回调
    success: {
      type: function,
    },
    // 失败回调
    fail: {
      type: function,
    },
  },
  setup(props) {
    // ok的颜色
    const setokcolor = () => {
      return `color: ${props.oktextcolor}`;
    };
    // 取消的颜色
    const setcanclecolor = () => {
      return `color: ${props.cancletextcolor}`;
    };

    // 移除当前组件
    function removemodal() {
      const modeldom = document.body.queryselector(
        `.__default__container__message__`
      );
      if (modeldom) {
        document.body.removechild(modeldom);
      }
    }

    const handlecancel = () => {
      removemodal();
      props.fail && props.fail();
    };

    const handleok = () => {
      removemodal();
      props.success && props.success();
    };

    return {
      setokcolor,
      setcanclecolor,

      handleok,
      handlecancel,
    };
  },
});
</script>
<style scoped lang="scss">
.default-message {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba($color: #000000, $alpha: 0.3);

  .default-message-title {
    padding-top: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }

  .default-message-content {
    width: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    border-radius: 6px;
    transition: all 0.2s ease-in;
    color: #999;
    font-size: 18px;
  }

  .default-message-value {
    padding: 10px 20px 15px;
    min-height: 36px;
    position: relative;
    color: #999;
    text-align: center;
    line-height: 36px;
  }
  .default-message-btns {
    // border-top: 1px solid #ddd;
    display: flex;
    height: 46px;
    position: relative;
    &:after {
      position: absolute;
      content: "";
      display: inline-block;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      transform: scaley(0.5);
      background: #ddd;
    }
    .default-message-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      padding: 0 3px;
    }
    .default-message-cancle {
      position: relative;
      &:after {
        position: absolute;
        content: "";
        display: inline-block;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        transform: scalex(0.5);
        background: #ddd;
      }
    }
  }
  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>

import { createvnode, render } from "vue";
import messageconstructor from "./index.vue";

const $message = function(options) {
  // 创建div
  const container = document.createelement("div");
  container.classname = `__default__container__message__`;
  //创建虚拟节点
  const vm = createvnode(messageconstructor, options);
  //渲染虚拟节点
  render(vm, container);
  document.body.appendchild(container);
};

export default {
  //组件注册
  install(app) {
    app.config.globalproperties.$message = $message;
  }
};

import { createapp } from "vue";
import router from "./router";
import store from "./store";
import app from "./app.vue";

import message from "./assets/plugins/message";

const app = createapp(app);

app.use(message);

app.use(store);
app.use(router);
app.mount("#app", { username: "123 });

import { getcurrentinstance } from "vue";
setup(props) {
	const { ctx } = getcurrentinstance();
	
	  ctx.$message({
        content: "您确定要退出吗？",
        cancletext: "取消",
        success: (res) => {
          	console.log(res);
        },
        fail: (err) => {
			console.log(err);
		},
      });
}

// main.js
export const app = createapp(app);

// util.js
import { app } from "../../main";

/**
 * @params title string
 * @params content string
 * @params oktext string
 * @params oktextcolor string
 * @params cancletext string
 * @params cancletextcolor string
 * @return promise
 */
export function showmessage(params) {
  return new promise((resolve, reject) => {
    app.config.globalproperties.$message({
      ...params,
      success: () => {
        return resolve("is:ok");
      },
      fail: () => {
        return reject("is:cancle");
      }
    });
  });
}

import { showmessage } from "../../assets/scripts/util";
setup(){
	 const logout = () => {
      showmessage({ content: "您确定要退出吗？", cancletext: "取消" })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    };
   return { logout };
}