封装Message和ButtonUI组件（vue3Composition API+TS+ Less ）

Message 消息提示

• Message/index.vue

<template>
  <div :class="['message-box', messageData.type]" v-if="variable">
    {{ messageData.msg }}
  </div>
</template>
<script lang="ts">
import { onMounted, ref, defineComponent } from "vue";
const body = document.body;
const root = document.createElement("div");
body.appendChild(root);
root.id = "message";
export default defineComponent({
  props: {
    messageData: Object,
  },
  setup() {
    const duration = ref<number>(3000); // 时长
    const variable = ref<boolean>(true); // 控制显示隐藏
    onMounted(() => {
      setTimeout(() => {
        variable.value = false;
      }, duration.value);
    });
    return {
      variable,
    };
  },
});
</script>
<style lang="less">
.message-box {
  padding: 15px 15px 15px 20px;
  background-color: red;
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2021;
  &.success {
    background-color: #f0f9eb;
    border-color: #e1f3d8;
    color: #67c23a;
  }
  &.error {
    background-color: #fef0f0;
    border-color: #fde2e2;
    color: #f56c6c;
  }
  &.warning {
    background-color: #fdf6ec;
    border-color: #faecd8;
    color: #e6a23c;
  }
}
</style>

• Message/index.ts

import { createApp, h, reactive } from "vue";
import MessageComponent from "./index.vue";
interface MessageData {
  type: string;
  msg: string;
}
interface MessageType {
  success(msg: string): void; // 成功
  error(msg: string): void; // 错误
  info(msg: string): void; // 消息
  warning(msg: string): void; // 警告
}
let messageData = reactive<MessageData>({ msg: "", type: "" });
function handleData(type: string, msg: string) {
  messageData = { type, msg };
  const app = createApp({
    render() {
      return h(MessageComponent, { messageData });
    },
  });
  app.mount("#message");
}
// 定义一个类 这个类的类型就是定义的接口
class MessageClass implements MessageType {
  success(msg: string): void {
    handleData("success", msg);
  }
  error(msg: string): void {
    handleData("error", msg);
  }
  warning(msg: string): void {
    handleData("warning", msg);
  }
  info(msg: string): void {
    handleData("info", msg);
  }
}
const Message = new MessageClass();
export default Message;

• 需要使用的组件

import { onMounted } from "vue";
import MyUI from "@/libs/MyUI/index.ts";
import Message from "@/components/Message/index.ts";
export default {
  name: "Contact",
  components: {
    MyHeader,
    ...MyUI.components,
  },
  setup() {
    const methods = {
      handleSuccessClick: () => {
        Message.success("这是成功的按钮");
      },
      handleErrClick: () => {
        Message.error("这是错误的按钮");
      },
    };
    return {
      ...methods,
    };
  },
};

Button 组件

• libs/MyUI/button.vue

<template>
  <button :class="['my-btn', btnStyle]"><slot /></button>
</template>
<script>
export default {
  name: "MyBtn",
  props: {
    btnStyle: String,
  },
};
</script>
<style lang="less">
.my-btn {
  cursor: pointer;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  text-align: center;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  padding: 12px 20px;
  border-radius: 4px;
  &:hover {
    box-shadow: 0 0 8px 0 rgb(232, 237, 250, 0.6),
      0 2px 4px 0 rgb(232, 237, 250, 0.5);
  }
  &.btn-success {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
  &.btn-primary {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
  }
  &.btn-info {
    background-color: #909399;
    border-color: #909399;
    color: #fff;
  }
  &.btn-warning {
    background-color: #e6a23c;
    border-color: #e6a23c;
    color: #fff;
  }
  &.btn-danger {
    background-color: #f56c6c;
    border-color: #f56c6c;
    color: #fff;
  }
}
</style>

• 使用

import { onMounted } from "vue";
import MyUI from "@/libs/MyUI/index.ts";
export default {
  name: "Contact",
  components: {
    ...MyUI.components,
  }
};
<my-btn btn-style="btn-success" @click="handleSuccessClick">成功按钮</my-btn>