|
|
@@ -12,7 +12,16 @@
|
|
|
</Transition>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { CSSProperties, PropType, computed } from 'vue';
|
|
|
+import {
|
|
|
+ CSSProperties,
|
|
|
+ PropType,
|
|
|
+ computed,
|
|
|
+ watch,
|
|
|
+ onBeforeUnmount,
|
|
|
+ onDeactivated,
|
|
|
+ onMounted,
|
|
|
+ onActivated
|
|
|
+} from 'vue';
|
|
|
import { createComponent } from '../../utils/create';
|
|
|
const { componentName, create } = createComponent('overlay');
|
|
|
const overlayProps = {
|
|
|
@@ -59,6 +68,24 @@ export default create({
|
|
|
};
|
|
|
});
|
|
|
|
|
|
+ watch(props.lockScroll, (value) => {
|
|
|
+ value ? lock() : unlock();
|
|
|
+ });
|
|
|
+
|
|
|
+ const lock = () => {
|
|
|
+ if (props.lockScroll) {
|
|
|
+ document.body.classList.add('nut-overflow-hidden');
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const unlock = () => {
|
|
|
+ document.body.classList.remove('nut-overflow-hidden');
|
|
|
+ };
|
|
|
+
|
|
|
+ onDeactivated(unlock);
|
|
|
+ onBeforeUnmount(unlock);
|
|
|
+ onMounted(lock);
|
|
|
+ onActivated(lock);
|
|
|
+
|
|
|
const style = computed(() => {
|
|
|
return {
|
|
|
animationDuration: `${props.duration}s`,
|