/*
|
* @Author: ShawnPhang
|
* @Date: 2023-04-26 11:30:10
|
* @Description:
|
* @LastEditors: ShawnPhang <https://m.palxp.cn>
|
* @LastEditTime: 2023-11-28 11:03:14
|
*/
|
export const parseBackgroundValue = (value: string): string => {
|
if (value.startsWith('#')) return '纯色';
|
if (value.startsWith('linear-gradient')) return '渐变';
|
return '图案';
|
};
|
|
interface Stop {
|
color: string;
|
offset: number;
|
}
|
|
export const toGradientString = (angle: number, stops: Stop[]) => {
|
const s: string[] = [];
|
stops.forEach((stop) => {
|
s.push(`${stop.color} ${stop.offset * 100}%`);
|
});
|
return `linear-gradient(${angle}deg, ${s.join(',')})`;
|
};
|
|
/**
|
* 显示全局提示
|
* @param content
|
* @param tooltipVisible
|
* @returns
|
*/
|
export function toolTip(content: string) {
|
const tooltip = drawTooltip(content);
|
document.body.appendChild(tooltip);
|
setTimeout(() => tooltip?.parentNode?.removeChild(tooltip), 2000);
|
}
|
|
function drawTooltip(content: string, tooltipVisible = true) {
|
const tooltip: any = document.createElement('div');
|
tooltip.id = 'color-pipette-tooltip-container';
|
tooltip.innerHTML = content;
|
tooltip.style = `
|
position: fixed;
|
left: 50%;
|
top: 9%;
|
z-index: 10002;
|
display: ${tooltipVisible ? 'flex' : 'none'};
|
align-items: center;
|
background-color: rgba(0,0,0,0.4);
|
padding: 6px 12px;
|
border-radius: 4px;
|
color: #fff;
|
font-size: 18px;
|
pointer-events: none;
|
`;
|
return tooltip;
|
}
|
