第三方平台做网站网站,wp_head wordpress,新纪实网站建设,搜索引擎提交入口一、效果描述
在JS中使用一个Message函数#xff0c;弹出一个自定义的消息框。
效果体验#xff1a;缓若江海凝清光
二、实现方式
1.新建一个消息组件
2.新建一个js文件#xff0c;新建一个需要导出函数
3.在函数中新建一个Vue实例#xff0c;并将消息组件挂载上去。…一、效果描述
在JS中使用一个Message函数弹出一个自定义的消息框。
效果体验缓若江海凝清光
二、实现方式
1.新建一个消息组件
2.新建一个js文件新建一个需要导出函数
3.在函数中新建一个Vue实例并将消息组件挂载上去。
4.在需要使用到的地方导入
三、代码展示
1.消息组件messageOne
templatediv:classyangshi 0 ? message messageIn : message messageOutv-showmeShow:style{backgroundColor: tranColor,color: getComplementColor(tranColor),}clickhandleColsediv classtextBox{{ message }}/div/div
/template
script setup langts
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则转换为六位例如#ffffffif (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;}
}
/style2.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 langts
import { showMessageOne } from ../../components/messageOne;
const ClickButton () {showMessageOne(消息通知,(close: any) {close();},#000);
};
/script