File size: 1,417 Bytes
4d70170 |
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 |
import type { DevtoolsBackend } from '@vue-devtools/app-backend-api'
import type { ComponentInstance } from '@vue/devtools-api'
export async function flashComponent(instance: ComponentInstance, backend: DevtoolsBackend) {
const bounds = await backend.api.getComponentBounds(instance)
if (bounds) {
let overlay: HTMLDivElement = instance.__VUE_DEVTOOLS_FLASH
if (!overlay) {
overlay = document.createElement('div')
instance.__VUE_DEVTOOLS_FLASH = overlay
overlay.style.border = '2px rgba(65, 184, 131, 0.7) solid'
overlay.style.position = 'fixed'
overlay.style.zIndex = '99999999999998'
overlay.style.pointerEvents = 'none'
overlay.style.borderRadius = '3px'
overlay.style.boxSizing = 'border-box'
document.body.appendChild(overlay)
}
overlay.style.opacity = '1'
overlay.style.transition = null
overlay.style.width = `${Math.round(bounds.width)}px`
overlay.style.height = `${Math.round(bounds.height)}px`
overlay.style.left = `${Math.round(bounds.left)}px`
overlay.style.top = `${Math.round(bounds.top)}px`
requestAnimationFrame(() => {
overlay.style.transition = 'opacity 1s'
overlay.style.opacity = '0'
})
clearTimeout((overlay as any)._timer)
;(overlay as any)._timer = setTimeout(() => {
document.body.removeChild(overlay)
instance.__VUE_DEVTOOLS_FLASH = null
}, 1000)
}
}
|