【使用前先看介绍/有问题可反馈】气泡信息 (Bubble Message)：能够生成悬浮气泡通知，支持自定义 icon 颜色、文字信息、淡入淡出时间、显示时间，气泡宽度。
Per
// ==UserScript==
// @name Bubble Message
// @namespace http://tampermonkey.net/
// @version 0.1.2
// @description 【使用前先看介绍/有问题可反馈】气泡信息 (Bubble Message)：能够生成悬浮气泡通知，支持自定义 icon 颜色、文字信息、淡入淡出时间、显示时间，气泡宽度。
// @author cc
// @include *
// @grant none
// ==/UserScript==
(function() {
'use strict';
function getStyle (config) {
let style = document.createElement('style');
style.id = 'bubble-message-style';
style.innerHTML = `
.bm-row-container {
display: flex;
flex-direction: row;
align-items: center;
}
.bm-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bm-info {
z-index: 2001;
padding: 10px;
background-color: white;
color: black;
border: 1px solid #eeeeee;
font-size: 14px;
border-radius: 5px;
position: fixed;
top: 20px;
left: 0;
right: 0;
margin: auto;
width: ${config.width}px;
}
.bm-info-enter-active {
animation: fade-in ${config.fadeInTime}s forwards;
}
.bm-info-leave-active {
animation: fade-out ${config.fadeOutTime}s forwards;
}
.bm-icon {
width: 14px;
height: 14px;
border-radius: 50%;
color: white;
font-size: 11px;
font-weight: bold;
}
@keyframes fade-in {
from {
opacity: 0;
scale: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
scale: 1;
transform: translateY(0px);
}
}
@keyframes fade-out {
from {
opacity: 1;
transform: translateY(0px);
}
to {
opacity: 1;
transform: translateY(-20px);
}
}
`;
return style;
}
function BubbleMessage () {
this.config = {
cmap: {
info: '#909399',
warning: '#e6a23c',
error: '#f56c6c',
success: '#67c23a'
},
fadeInTime: 0.4,
fadeOutTime: 0.6,
width: 240,
};
this.message = function (options) {
options = options || {}
if (Object.keys(this.config.cmap).indexOf(options.type) < 0) options.type = 'info';
if (typeof options.message !== 'string') options.message = String(options.message)
if (typeof options.duration !== 'number' || options.duration < 1500) options.duration = 1500;
let info = document.createElement('div');
info.className = 'bm-info bm-row-container bm-info-enter-active';
info.innerHTML = `
<div class="bm-container bm-icon" style="background-color: ${this.config.cmap[options.type]};"> <div> ! </div> </div>
<div style="margin-left: 10px; width: ${this.config.width - 25};"> ${options.message} </div>
`
let style = getStyle(this.config);
document.body.appendChild(style);
document.body.appendChild(info)
setTimeout(() => {
info.className = 'bm-info bm-row-container bm-info-leave-active';
setTimeout(() => {
document.body.removeChild(info);
document.body.removeChild(style);
}, 600);
}, options.duration);
};
};
window.BubbleMessage = BubbleMessage;
console.info('Bubble Message version: 0.1.2');
})();