Vue2 插件化开发

开发一个 Message 插件, 在屏幕中显示一个信息

目录结构

代码实现

<!-- Message/Message.vue -->
<template>
  <div v-show="visible" class="message-box" :class="type">{{ msg }}</div>
</template>

<script>
  export default {
    data: () => ({
      type: "",
      msg: "",
      onClose: null,
      visible: true,
      duration: 1000,
    }),
    mounted() {
      this.timer = null;
      this.startTimer();
    },
    methods: {
      close() {
        this.visible = false;
        this.clearTimer();
        typeof this.onClose === "function" && this.onClose();
      },
      startTimer() {
        this.timer = setTimeout(this.close, this.duration);
      },
      clearTimer() {
        this.timer && clearTimeout(this.timer);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .message-box {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    min-width: 200px;
    text-align: center;
    padding: 5px 10px;
    color: #fff;
    border-radius: 3px;
    font-size: 14px;
    &.info {
      background: #c6e2ff;
    }
    &.error {
      background: #f56c6c;
    }
    &.success {
      background: #67c23a;
    }
  }
</style>

// Message/index.js
"use strict";
import Vue from "vue";
import MessageVue from "./Message.vue";

// Vue.extend 继承 Vue 类
const MessageClass = Vue.extend(MessageVue);
const MessageTypes = ["success", "warning", "info", "error"];

// MessageComponent 的 vm 实例
let instance;

function Message(options = { type: "info", msg: "" }) {
  options.onClose = Message.close;
  instance = new MessageClass({
    data: options,
  });
  instance.$mount(); // 手动挂载
  document.body.append(instance.$el); // 将 $el 添加到 body
}

// 可以直接 Message() 也可以 Message.success() 调用
MessageTypes.forEach((item) => {
  Message[item] = function (msg) {
    if (typeof msg !== "string") {
      throw new TypeError("[Message]: msg must be a string");
    }
    return Message({ type: item, msg });
  };
});

// 销毁实例
Message.close = function () {
  instance.$el.remove();
  instance.$destroy();
  instance = null;
};

export default Message;

Vue3 插件化开发

目录结构

源码实现

<!-- ConfirmMsg/index.vue -->
<template>
  <teleport to="body">
    <div v-show="visible" class="layer-mask">
      <div class="layer-main">
        <div class="layer-header">{{ data.title }}</div>
        <div class="layer-content">{{ data.content }}</div>
        <div class="layer-footer">
          <button class="btn cancel" @click="cancel">取消</button>
          <button class="btn confirm" @click="confirm">确定</button>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
  import { reactive, ref, defineExpose } from "vue";

  const visible = ref(true);
  const data = reactive({
    title: "",
    content: "",
  });

  // onConfirm(resolve), onCancel(reject), onClose(ConfirmMsg.close)
  let onConfirm, onCancel, onClose;

  function init({ resolve, reject, close, options }) {
    onConfirm = resolve;
    onCancel = reject;
    onClose = close;
    data.title = options.title;
    data.content = options.content;
  }
  defineExpose({ init });

  const cancel = () => exec(onCancel);
  const confirm = () => exec(onConfirm);
  function exec(fn) {
    visible.value = false;
    typeof fn === "function" && fn.call(this);
    typeof onClose === "function" && onClose(this);
  }
</script>

<style lang="scss" scoped>
  .layer-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 100%;
    right: 100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    .layer-main {
      min-width: 300px;
      background: #fff;
      padding: 10px 20px;
      .layer-header {
        font-weight: 500;
      }
      .layer-content {
        padding: 30px 0;
        text-align: center;
      }
      .layer-footer {
        display: flex;
        justify-content: flex-end;
        .btn {
          border: none;
          color: #fff;
          padding: 5px 15px;
          &.confirm {
            background: #3f9eff;
          }
          &.cancel {
            margin-right: 20px;
            background: #f42c2e;
          }
        }
      }
    }
  }
</style>

// ConfirmMsg/index.js
"use strict";

import { createApp } from "vue";
import ConfirmMsgVue from "./index.vue";

let instance; // ConfirmMsg 实例, 一个 Proxy 对象
let appCtx; // 应用实例可以理解为 getCurrentInstnace() 返回的结果,
// 注意这个 appCtx 和 setup(ctx) 这个参数是不同的
// appCtx 是组件的执行上下文, 而 setup(ctx) 只是 setup 函数
// 执行是时的上下文

function ConfirmMsg(options = { title, content }) {
  return new Promise((resolve, reject) => {
    const frag = document.createDocumentFragment();
    appCtx = createApp(ConfirmMsgVue);
    instance = appCtx.mount(frag);
    instance.init({
      resolve,
      reject,
      close: ConfirmMsg.close,
      options,
    });
  });
}

// 卸载组件 && 销毁实例
ConfirmMsg.close = function () {
  instance.$el.remove();
  appCtx.unmount();
  instance = null;
};

export default ConfirmMsg;