common.ts
2.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// 美化打印实现方法
export const prettyLog = () => {
const isEmpty = (value: any) => {
return value == null || value === undefined || value === ''
}
const prettyPrint = (title: string, text: string, color: string) => {
console.log(
`%c ${title} %c ${text} %c`,
`background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
`border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
'background:transparent'
)
}
// 基础信息打印
const info = (textOrTitle: string, content = '') => {
const title = isEmpty(content) ? 'Info' : textOrTitle
const text = isEmpty(content) ? textOrTitle : content
prettyPrint(title, text, '#909399')
}
const error = (textOrTitle: string, content = '') => {
const title = isEmpty(content) ? 'Error' : textOrTitle
const text = isEmpty(content) ? textOrTitle : content
prettyPrint(title, text, '#F56C6C')
}
const warn = (textOrTitle: string, content = '') => {
const title = isEmpty(content) ? 'Warning' : textOrTitle
const text = isEmpty(content) ? textOrTitle : content
prettyPrint(title, text, '#E6A23C')
}
const success = (textOrTitle: string, content = '') => {
const title = isEmpty(content) ? 'Success ' : textOrTitle
const text = isEmpty(content) ? textOrTitle : content
prettyPrint(title, text, '#67C23A')
}
const picture = (url: string, scale = 1) => {
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = () => {
const c = document.createElement('canvas')
const ctx = c.getContext('2d')
if (ctx) {
c.width = img.width
c.height = img.height
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, c.width, c.height)
ctx.drawImage(img, 0, 0)
const dataUri = c.toDataURL('image/png')
console.log(
`%c sup?`,
`font-size: 1px;
padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
background-image: url(${dataUri});
background-repeat: no-repeat;
background-size: ${img.width * scale}px ${img.height * scale}px;
color: transparent;
`
)
}
}
img.src = url
}
return {
info, error, warn, success, picture
}
}