Vue:自定义消息通知组件

一、效果描述

在JS中使用一个Message函数，弹出一个自定义的消息框。

效果体验：缓若江海凝清光

二、实现方式

1.新建一个消息组件

2.新建一个js文件，新建一个需要导出函数

3.在函数中新建一个Vue实例，并将消息组件挂载上去。

4.在需要使用到的地方导入

三、代码展示

1.消息组件messageOne

<template><div:class="yangshi == 0 ? 'message messageIn' : 'message messageOut'"v-show="meShow":style="{backgroundColor: tranColor,color: getComplementColor(tranColor),}"@click="handleColse"><div class="textBox">{{ message }}</div></div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";const props = defineProps({message: String,color: String,
});
const message = computed(() => props.message);
const emits = defineEmits(["click"]);
// 传输的颜色
const tranColor = computed(() => props.color);
const meShow = ref(true);
const yangshi = ref(0);
const changeShow = () => {setTimeout(() => {yangshi.value = 1;}, 2500);setTimeout(() => {meShow.value = false;}, 3000);
};
// 判断颜色格式
const isRgbColor = (color: string) => {// RGB格式的正则表达式const rgbRegex = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/;const rgbaRegex =/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1}|0\.\d+)\)$/;// 检查RGB或RGBA格式if (rgbRegex.test(color) || rgbaRegex.test(color)) {return "rgb";}// 十六进制格式的正则表达式const hexRegex = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;// 检查十六进制格式if (hexRegex.test(color)) {return "hex";}// 如果都不是，返回falsereturn false;
};
// hex转rgb
const hexToRgb = (hex: string) => {// 去除字符串前面的 '#'hex = hex.replace("#", "");// 如果颜色代码只有三位（例如：#fff），则转换为六位（例如：#ffffff）if (hex.length === 3) {hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];}// 将十六进制颜色拆分为RGB三个分量const r = parseInt(hex.substring(0, 2), 16);const g = parseInt(hex.substring(2, 4), 16);const b = parseInt(hex.substring(4, 6), 16);// 返回RGB对象或字符串，根据需要调整// return {//     r: r,//     g: g,//     b: b// };// 如果需要返回字符串格式，可以使用以下代码return `rgb(${r}, ${g}, ${b})`;
};
// 获取补色
const getComplementColor = (rgbString: string | undefined) => {if (!rgbString) return;let a = isRgbColor(rgbString);if (a == "hex") {rgbString = hexToRgb(rgbString);}// 正则表达式用于匹配rgb格式中的数值const rgbRegex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;const result = rgbString.match(rgbRegex);// 如果没有匹配到有效的rgb格式，则返回错误if (!result) {throw new Error('Invalid RGB color format. Expected "rgb(R, G, B)" format.');}// 提取红色、绿色和蓝色的数值const r = parseInt(result[1], 10);const g = parseInt(result[2], 10);const b = parseInt(result[3], 10);// 计算补色的RGB值const complementR = 255 - r;const complementG = 255 - g;const complementB = 255 - b;// 格式化补色为"rgb(R, G, B)"字符串const complementColor = `rgb(${complementR}, ${complementG}, ${complementB})`;return complementColor;
};
const handleColse = () => {emits("click");
};
changeShow();
</script>
<style scoped>
.message {color: rgb(36, 21, 40);min-width: 200px;width: auto;height: 70px;background-color: rgba(17, 153, 20, 0.9);position: absolute;top: 50px;left: 50vw;transform: translateX(-50%);display: flex;justify-content: center;align-items: center;padding-left: 15px;padding-right: 15px;border-radius: 20px;box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.messageIn {animation: mShow 0.5s;
}
.messageOut {animation: mNoShow 0.5s;animation-fill-mode: forwards;
}@keyframes mShow {0% {opacity: 0;}100% {opacity: 1;}
}
@keyframes mNoShow {0% {opacity: 1;}100% {opacity: 0;}
}
</style>

2.TS文件messageOne.ts

import { createApp } from "vue";
import MessageOne from "./messageOne.vue";
export function showMessageOne(message: string, onClick: any, color?: string) {const div = document.createElement("div");document.body.appendChild(div);// 自定义挂载的组件和传输的参数const app = createApp(MessageOne, {message,color,onClick() {onClick(() => {app.unmount();div.remove();});},});app.mount(div);
}

3.使用

<script setup lang="ts">
import { showMessageOne } from "../../components/messageOne";
const ClickButton = () => {showMessageOne("消息通知",(close: any) => {close();},'#000');
};
</script>