71 lines
1.2 KiB
Vue
71 lines
1.2 KiB
Vue
<script setup>
|
|
import { computed } from "vue"
|
|
|
|
const props = defineProps({
|
|
rect: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const style = computed(() => {
|
|
const r = props.rect
|
|
return {
|
|
"--top": `${r.top}px`,
|
|
"--left": `${r.left}px`,
|
|
"--width": `${r.width}px`,
|
|
"--height": `${r.height}px`
|
|
}
|
|
})
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
|
<Teleport to="body">
|
|
<Transition name="tour-fade">
|
|
<div
|
|
class="tour-overlay"
|
|
:style="style"
|
|
/>
|
|
</Transition>
|
|
</Teleport>
|
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
|
.tour-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9998;
|
|
pointer-events: none;
|
|
background: rgba(0,0,0,.55);
|
|
|
|
/*
|
|
вырезаем окно
|
|
*/
|
|
mask:
|
|
linear-gradient(#000 0 0),
|
|
linear-gradient(#000 0 0);
|
|
mask-size:
|
|
100% 100%,
|
|
var(--width) var(--height);
|
|
mask-position:
|
|
0 0,
|
|
var(--left) var(--top);
|
|
mask-repeat:no-repeat;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
.tour-fade-enter-active,
|
|
.tour-fade-leave-active {
|
|
transition: opacity .2s;
|
|
}
|
|
|
|
.tour-fade-enter-from,
|
|
.tour-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
</style> |