mirror of
https://github.com/palxiao/poster-design.git
synced 2025-07-03 03:56:41 +08:00
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
/*
|
|
* @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
|
|
}
|