Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
一臭打代码的 aka 潘先生です
vue-vben-admin
提交
a1d956d3
V
vue-vben-admin
项目概览
一臭打代码的 aka 潘先生です
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
a1d956d3
编写于
7月 13, 2021
作者:
Y
yanzhuang
提交者:
GitHub
7月 13, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(useWatermark): fix `func` call `createWatermark` call `clear` to resizeEvent removed (#901)
上级
35e13470
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
71 addition
and
21 deletion
+71
-21
src/hooks/web/useWatermark.ts
src/hooks/web/useWatermark.ts
+56
-21
src/utils/domUtils.ts
src/utils/domUtils.ts
+15
-0
未找到文件。
src/hooks/web/useWatermark.ts
浏览文件 @
a1d956d3
import
{
getCurrentInstance
,
onBeforeUnmount
,
ref
,
Ref
,
unref
}
from
'
vue
'
;
import
{
getCurrentInstance
,
onBeforeUnmount
,
ref
,
Ref
,
shallowRef
,
unref
}
from
'
vue
'
;
import
{
useRafThrottle
}
from
'
/@/utils/domUtils
'
;
import
{
addResizeListener
,
removeResizeListener
}
from
'
/@/utils/event
'
;
import
{
isDef
}
from
'
/@/utils/is
'
;
const
domSymbol
=
Symbol
(
'
watermark-dom
'
);
export
function
useWatermark
(
appendEl
:
Ref
<
HTMLElement
|
null
>
=
ref
(
document
.
body
)
as
Ref
<
HTMLElement
>
)
{
let
func
:
Fn
=
()
=>
{};
const
func
=
useRafThrottle
(
function
()
{
const
el
=
unref
(
appendEl
);
if
(
!
el
)
return
;
const
{
clientHeight
:
height
,
clientWidth
:
width
}
=
el
;
updateWatermark
({
height
,
width
});
});
const
id
=
domSymbol
.
toString
();
const
watermarkEl
=
shallowRef
<
HTMLElement
>
();
const
clear
=
()
=>
{
const
domId
=
document
.
getElementById
(
id
);
if
(
domId
)
{
const
el
=
unref
(
appendEl
);
el
&&
el
.
removeChild
(
domId
)
;
}
window
.
removeEventListener
(
'
resize
'
,
func
);
const
domId
=
unref
(
watermarkEl
);
watermarkEl
.
value
=
undefined
;
const
el
=
unref
(
appendEl
);
if
(
!
el
)
return
;
domId
&&
el
.
removeChild
(
domId
);
removeResizeListener
(
el
,
func
);
};
const
createWatermark
=
(
str
:
string
)
=>
{
clear
();
function
createBase64
(
str
:
string
)
{
const
can
=
document
.
createElement
(
'
canvas
'
);
can
.
width
=
300
;
can
.
height
=
240
;
const
width
=
300
;
const
height
=
240
;
Object
.
assign
(
can
,
{
width
,
height
});
const
cans
=
can
.
getContext
(
'
2d
'
);
if
(
cans
)
{
...
...
@@ -29,30 +39,55 @@ export function useWatermark(
cans
.
fillStyle
=
'
rgba(0, 0, 0, 0.15)
'
;
cans
.
textAlign
=
'
left
'
;
cans
.
textBaseline
=
'
middle
'
;
cans
.
fillText
(
str
,
can
.
width
/
20
,
can
.
height
);
cans
.
fillText
(
str
,
width
/
20
,
height
);
}
return
can
.
toDataURL
(
'
image/png
'
);
}
function
updateWatermark
(
options
:
{
width
?:
number
;
height
?:
number
;
str
?:
string
;
}
=
{}
)
{
const
el
=
unref
(
watermarkEl
);
if
(
!
el
)
return
;
if
(
isDef
(
options
.
width
))
{
el
.
style
.
width
=
`
${
options
.
width
}
px`
;
}
if
(
isDef
(
options
.
height
))
{
el
.
style
.
height
=
`
${
options
.
height
}
px`
;
}
if
(
isDef
(
options
.
str
))
{
el
.
style
.
background
=
`url(
${
createBase64
(
options
.
str
)}
) left top repeat`
;
}
}
const
createWatermark
=
(
str
:
string
)
=>
{
if
(
unref
(
watermarkEl
))
{
updateWatermark
({
str
});
return
id
;
}
const
div
=
document
.
createElement
(
'
div
'
);
watermarkEl
.
value
=
div
;
div
.
id
=
id
;
div
.
style
.
pointerEvents
=
'
none
'
;
div
.
style
.
top
=
'
0px
'
;
div
.
style
.
left
=
'
0px
'
;
div
.
style
.
position
=
'
absolute
'
;
div
.
style
.
zIndex
=
'
100000
'
;
div
.
style
.
width
=
document
.
documentElement
.
clientWidth
+
'
px
'
;
div
.
style
.
height
=
document
.
documentElement
.
clientHeight
+
'
px
'
;
div
.
style
.
background
=
'
url(
'
+
can
.
toDataURL
(
'
image/png
'
)
+
'
) left top repeat
'
;
const
el
=
unref
(
appendEl
);
el
&&
el
.
appendChild
(
div
);
if
(
!
el
)
return
id
;
const
{
clientHeight
:
height
,
clientWidth
:
width
}
=
el
;
updateWatermark
({
str
,
width
,
height
});
el
.
appendChild
(
div
);
return
id
;
};
function
setWatermark
(
str
:
string
)
{
createWatermark
(
str
);
func
=
()
=>
{
createWatermark
(
str
);
};
window
.
addEventListener
(
'
resize
'
,
func
);
addResizeListener
(
document
.
documentElement
,
func
);
const
instance
=
getCurrentInstance
();
if
(
instance
)
{
onBeforeUnmount
(()
=>
{
...
...
src/utils/domUtils.ts
浏览文件 @
a1d956d3
import
type
{
FunctionArgs
}
from
'
@vueuse/core
'
;
import
{
upperFirst
}
from
'
lodash-es
'
;
export
interface
ViewportOffsetResult
{
...
...
@@ -163,3 +164,17 @@ export function once(el: HTMLElement, event: string, fn: EventListener): void {
};
on
(
el
,
event
,
listener
);
}
export
function
useRafThrottle
<
T
extends
FunctionArgs
>
(
fn
:
T
):
T
{
let
locked
=
false
;
// @ts-ignore
return
function
(...
args
:
any
[])
{
if
(
locked
)
return
;
locked
=
true
;
window
.
requestAnimationFrame
(()
=>
{
// @ts-ignore
fn
.
apply
(
this
,
args
);
locked
=
false
;
});
};
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录