51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
|
import type { Directive } from "vue";
|
||
|
|
interface ElType extends HTMLElement {
|
||
|
|
$oldStyle: CSSStyleDeclaration;
|
||
|
|
$fullStyle: CSSStyleDeclaration;
|
||
|
|
}
|
||
|
|
const vFull: Directive = {
|
||
|
|
mounted: (el: ElType, binding) => {
|
||
|
|
el.$oldStyle = { ...el.style }
|
||
|
|
if (binding.arg === 'screen') {
|
||
|
|
el.$fullStyle = {
|
||
|
|
...el.style,
|
||
|
|
left: '0',
|
||
|
|
top: '0',
|
||
|
|
zIndex: '8',
|
||
|
|
position: 'fixed',
|
||
|
|
height: '100vh',
|
||
|
|
width: '100vw',
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
el.$fullStyle = {
|
||
|
|
...el.style,
|
||
|
|
left: '0',
|
||
|
|
top: '0',
|
||
|
|
zIndex: '8',
|
||
|
|
position: 'absolute',
|
||
|
|
height: '100%',
|
||
|
|
width: '100%',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
updated: (el: ElType, binding) => {
|
||
|
|
function setStyle(el: CSSStyleDeclaration, style: CSSStyleDeclaration) {
|
||
|
|
el.position = style.position
|
||
|
|
el.left = style.left
|
||
|
|
el.top = style.top
|
||
|
|
el.zIndex = style.zIndex
|
||
|
|
el.height = style.height
|
||
|
|
el.width = style.width
|
||
|
|
}
|
||
|
|
if (binding.value) {
|
||
|
|
setStyle(el.style, el.$fullStyle)
|
||
|
|
} else {
|
||
|
|
setStyle(el.style, el.$oldStyle)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default vFull
|
||
|
|
|
||
|
|
|