Overlay 오버레이(마스크 레이어)

원문 보기 위키 갱신 2026.10.11

현재 페이지 레이아웃과 독립적인 컴포넌트를 만들 때 쓰는 기초 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

전역 팝업이 필요하거나, 어떤 요소를 따라다니는 기능이 필요할 때 이 컴포넌트를 사용할 수 있어요.

고정 오버레이

:::demo

<template>
  <d-button @click="visible = !visible">显示固定遮罩层</d-button>
  <d-fixed-overlay v-model="visible" class="demo-fixed-overlay-bg">
    <div class="demo-fixed-overlay-container">Hello DevUI!</div>
  </d-fixed-overlay>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const visible = ref(false);

    return { visible };
  },
});
</script>

<style>
.demo-fixed-overlay-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10vw;
  height: 10vh;
  background: #fff;
  color: #000;
}

.demo-fixed-overlay-bg {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

:::

유동 오버레이

:::demo 시작점 요소를 따라 움직이고, 경계에 닿으면 position 파라미터로 지정한 위치 가운데 골라서 자동으로 조정해요.

<template>
  <div>
    <div ref="origin" class="demo-flexible-overlay-origin">origin</div>
    <br />
    <d-button @click="visible = !visible">{{ title }}</d-button>
    <d-flexible-overlay v-model="visible" :origin="origin" :position="position" show-arrow class="custom-overlay">
      Hello DevUI!
    </d-flexible-overlay>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const origin = ref();
    const visible = ref(false);
    const position = ref(['top', 'right']);
    const title = computed(() => (visible.value ? '隐藏' : '显示'));

    return {
      origin,
      visible,
      title,
      position,
    };
  },
});
</script>

<style>
.demo-flexible-overlay-origin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: #e9edfa;
  color: #252b3a;
}

.custom-overlay {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
</style>

:::

FixedOverlay 파라미터

파라미터	타입	기본값	설명	Demo 링크
v-model	`boolean`	false	선택, 오버레이 레이어 표시 여부	고정 오버레이
lock-scroll	`boolean`	true	선택, 배경 스크롤 잠금 여부
close-on-click-overlay	`boolean`	true	선택, 오버레이 레이어 클릭으로 닫기 여부

FlexibleOverlay 파라미터

파라미터	타입	기본값	설명
v-model	`boolean`	false	선택, 표시 제어
origin	`HTMLElement`	--	필수, 오버레이를 해당 요소에 연결하려면 시작 요소를 반드시 지정
position	Placement[]	['bottom']	선택, 표시 위치 지정
align	`start \| end \| center`	center	선택, 정렬 방식 지정. 기본은 가운데 정렬
offset	`number`	8	선택, 시작 요소와의 간격 지정
show-arrow	`boolean`	false	선택, 화살표 표시 여부

타입 정의

Placement

type Placement =
  | 'top'
  | 'right'
  | 'bottom'
  | 'left'
  | 'top-start'
  | 'top-end'
  | 'right-start'
  | 'right-end'
  | 'bottom-start'
  | 'bottom-end'
  | 'left-start'
  | 'left-end';

더 알아보기 (Learn more)

d-fixed-overlay는 화면 전체를 덮는 고정 마스크를, d-flexible-overlay는 시작점 요소에 붙어 따라다니는 유동 레이어를 만들어 줘요. Placement 타입으로 12가지 위치를 지정할 수 있어요.