一、效果描述
在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";
}
// 如果都不是,返回false
return 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>