perf: remove watermark use antdv
parent
4daf15f26b
commit
7aeba3367d
|
@ -1,108 +0,0 @@
|
|||
import type { Ref } from 'vue'
|
||||
import { getCurrentInstance, onBeforeUnmount, 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')
|
||||
const sourceMap = new WeakMap<HTMLElement, object>()
|
||||
|
||||
export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.body)) {
|
||||
const appendElRaw = unref(appendEl)
|
||||
if (appendElRaw && sourceMap.has(appendElRaw))
|
||||
return sourceMap.get(appendElRaw)
|
||||
|
||||
const func = useRafThrottle(() => {
|
||||
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 = unref(watermarkEl)
|
||||
watermarkEl.value = undefined
|
||||
const el = unref(appendEl)
|
||||
if (!el)
|
||||
return
|
||||
domId && el.removeChild(domId)
|
||||
removeResizeListener(el, func)
|
||||
}
|
||||
|
||||
function createBase64(str: string) {
|
||||
const can = document.createElement('canvas')
|
||||
const width = 300
|
||||
const height = 240
|
||||
Object.assign(can, { width, height })
|
||||
|
||||
const cans = can.getContext('2d')
|
||||
if (cans) {
|
||||
cans.rotate((-20 * Math.PI) / 120)
|
||||
cans.font = '15px Vedana'
|
||||
cans.fillStyle = 'rgba(0, 0, 0, 0.15)'
|
||||
cans.textAlign = 'left'
|
||||
cans.textBaseline = 'middle'
|
||||
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'
|
||||
const el = unref(appendEl)
|
||||
if (!el)
|
||||
return id
|
||||
const { clientHeight: height, clientWidth: width } = el
|
||||
updateWatermark({ str, width, height })
|
||||
el.appendChild(div)
|
||||
sourceMap.set(el, { setWatermark, clear })
|
||||
return id
|
||||
}
|
||||
|
||||
function setWatermark(str: string) {
|
||||
createWatermark(str)
|
||||
addResizeListener(document.documentElement, func)
|
||||
const instance = getCurrentInstance()
|
||||
if (instance) {
|
||||
onBeforeUnmount(() => {
|
||||
clear()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return { setWatermark, clear }
|
||||
}
|
Loading…
Reference in New Issue