Mention 멘션

원문 보기 위키 갱신 2026.10.11

입력 중에 사람이나 항목을 언급할 수 있게 해 주는 멘션 컴포넌트예요.

출처: 문서

본문

멘션(언급) 컴포넌트예요.

언제 사용하나요?

입력 도중에 누군가나 무언가를 언급할 때 사용해요. 게시, 채팅, 댓글 기능에서 특히 자주 쓰여요.

기본 사용법

멘션 컴포넌트의 기본 사용 방법을 보여 줘요. :::demo

<template>
  <div class="demo-spacing">
    <d-mention :suggestions="suggestions" @select="handleSelect"></d-mention>
  </div>
</template>

<script lang="ts" setup>
const suggestions = [
  {
    id: 1,
    value: 'javascript',
  },
  {
    id: 2,
    value: 'Vue',
  },
  {
    id: 3,
    value: 'React',
  },
  {
    id: 4,
    value: 'Angular',
  },
  {
    id: 5,
    value: 'Html',
  },
  {
    id: 6,
    value: 'Css',
  },
  {
    id: 7,
    value: 'Koa',
  },
  {
    id: 8,
    value: 'Express',
  },
  {
    id: 9,
    value: 'Nuxt',
  },
  {
    id: 10,
    value: 'Next',
  },
];

const handleSelect = (val) => {
  console.log(val);
};
</script>

:::

사용자 지정 접두 문자

트리거 문자를 직접 정할 수 있어요. 기본값은 @이고, 배열로 여러 개를 지정할 수도 있어요. :::demo

<template>
  <div class="demo-spacing">
    <d-mention :suggestions="suggestions" :trigger="triggers"></d-mention>
  </div>
</template>

<script lang="ts" setup>
const triggers = ['@', '#'];
const suggestions = [
  {
    id: 1,
    value: 'javascript',
  },
  {
    id: 2,
    value: 'Vue',
  },
  {
    id: 3,
    value: 'React',
  },
  {
    id: 4,
    value: 'Angular',
  },
  {
    id: 5,
    value: 'Html',
  },
  {
    id: 6,
    value: 'Css',
  },
  {
    id: 7,
    value: 'Koa',
  },
  {
    id: 8,
    value: 'Express',
  },
  {
    id: 9,
    value: 'Nuxt',
  },
  {
    id: 10,
    value: 'Next',
  },
];
</script>

:::

비동기 로딩

데이터를 비동기로 가져와야 할 때는 비동기 로딩 방식을 사용하면 돼요. :::demo

<template>
  <div class="demo-spacing">
    <d-mention :suggestions="suggestions" :loading="loading" @change="onSearchChange"></d-mention>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const loading = ref(true);
const suggestions = ref([]);

const onSearchChange = (val: string) => {
  loading.value = true;
  fetchSuggestions(val, (result) => {
    suggestions.value = result;
    loading.value = false;
  });
};
const fetchSuggestions = (value: string, callback: (suggestions: string[]) => void) => {
  const users = [
    {
      id: 1,
      value: 'javascript',
    },
    {
      id: 2,
      value: 'Vue',
    },
    {
      id: 3,
      value: 'React',
    },
    {
      id: 4,
      value: 'Angular',
    },
    {
      id: 5,
      value: 'Html',
    },
    {
      id: 6,
      value: 'Css',
    },
    {
      id: 7,
      value: 'Koa',
    },
    {
      id: 8,
      value: 'Express',
    },
    {
      id: 9,
      value: 'Nuxt',
    },
    {
      id: 10,
      value: 'Next',
    },
  ];
  setTimeout(() => {
    const result = users.filter((item) => {
      return item.value.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) !== -1;
    });
    return callback(result);
  }, 1000);
};
</script>

:::

위쪽으로 펼치기

검색 목록 옵션을 위쪽으로 펼칠 수도 있어요. :::demo

<template>
  <div class="demo-spacing">
    <d-mention :suggestions="suggestions" position="top"></d-mention>
  </div>
</template>

<script lang="ts" setup>
const suggestions = [
  {
    id: 1,
    value: 'javascript',
  },
  {
    id: 2,
    value: 'Vue',
  },
  {
    id: 3,
    value: 'React',
  },
  {
    id: 4,
    value: 'Angular',
  },
];
</script>

:::

사용자 지정 템플릿

표시 내용 템플릿을 직접 만들 수도 있어요. :::demo

<template>
  <div class="demo-spacing">
    <d-mention :suggestions="suggestions" :dmValueParse="{ value: 'name', id: 'id' }">
      <template #template="{ item }">
        <d-avatar style="text-align: right" :name="item.name" :width="18" :height="18"></d-avatar>
        <span style="margin-left: 8px">{{ item.name }} - {{ item.id }}</span>
      </template>
    </d-mention>
  </div>
</template>

<script lang="ts" setup>
const suggestions = [
  {
    name: 'C#',
    id: 1,
  },
  {
    name: 'C',
    id: 2,
  },
  {
    name: 'C++',
    id: 3,
  },
  {
    name: 'Python',
    id: 4,
  },
  {
    name: 'Java',
    id: 5,
  },
  {
    name: 'JavaScript',
    id: 6,
  },
  {
    name: 'Go',
    id: 7,
  },
];
</script>

:::

Mention 파라미터

파라미터	타입	기본값	설명	Demo 링크
suggestions	array	-	필수, 제안 데이터 소스	기본 사용법
position	top / bottom	bottom	선택, 제안 박스 위치	위쪽으로 펼치기
notFoundContent	string	No suggestion matched	선택, 데이터가 매칭되지 않았을 때 표시할 안내	-
loading	boolean	false	선택, 데이터 소스를 비동기로 로딩할 때 로딩 표시 여부	비동기 로딩
dmValueParse	`{value: string, id: string}`	`{value: value, id: id}`	선택, 제안 옵션의 값을 가져오는 방법	비동기 로딩
trigger	string[]	`['@']`	선택, 컴포넌트를 트리거하는 접두 문자	사용자 지정 접두 문자
show-glow-style	`boolean`	true	선택, 마우스 오버 시 발광 효과를 표시할지 여부

Mention 이벤트

파라미터	타입	기본값	설명	Demo 링크
select	Function({value: string, id: string})	-	제안 항목 선택 시 발생	기본 사용법
change	Function(value: string)	-	입력 박스 change 이벤트	비동기 로딩

더 알아보기 (Learn more)

d-mention은 @ 같은 트리거 문자만으로 후보를 띄워 주는 입력 보조 컴포넌트예요. 데이터를 서버에서 내려 받는 채팅이나 댓글창이라면 loading과 change 이벤트를 조합해 비동기 검색을 자연스럽게 붙일 수 있어요.