Mention

Mention (멘션)

입력창에서 누군가 또는 무언가를 멘션할 때 사용하는 컴포넌트예요.

출처: 문서

본문

기본 사용법 (Basic Usage)

가장 기본적인 사용법이에요.

Props 2.11.3

props 속성으로 옵션의 별칭(alias)을 커스터마이징할 수 있어요.

텍스트 영역 (Textarea)

입력 타입을 textarea로 설정할 수 있어요.

라벨 커스터마이징 (Customize label)

label 슬롯으로 라벨을 커스터마이징해요.

import { ref } from 'vue'

const value = ref('')

const options = ref([
  {
    value: 'Fuphoenixes',
    avatar: 'https://avatars.githubusercontent.com/u/27912232',
  },
  {
    value: 'kooriookami',
    avatar: 'https://avatars.githubusercontent.com/u/38392315',
  },
  {
    value: 'Jeremy',
    avatar: 'https://avatars.githubusercontent.com/u/15975785',
  },
  {
    value: 'btea',
    avatar: 'https://avatars.githubusercontent.com/u/24516654',
  },
])

원격 옵션 불러오기 (Load remote options)

옵션을 비동기로 불러와요.

트리거 토큰 커스터마이징 (Customize trigger token)

prefix props로 트리거 토큰을 커스터마이징해요. 기본값은 @이고, Array<string>도 지원해요.

통째로 삭제 (Delete as a whole)

whole 속성을 true로 설정하면 백스페이스를 눌렀을 때 멘션이 통째로 삭제돼요. check-is-whole 속성으로 체크 로직을 커스터마이징할 수 있어요.

폼과 함께 쓰기 (Work with form)

el-form과 함께 동작해요.

TIP 이 컴포넌트는 el-input 컴포넌트 기반으로 개발되어 원래 속성이 변경되지 않았으므로 여기서 반복하지 않고, 원본 컴포넌트 문서를 참고하세요.

API

Attributes

Name Description Type Default
options 멘션 옵션 리스트 array []
props 2.11.3 설정 옵션 object {value: 'value', label: 'label', disabled: 'disabled'}
prefix 멘션을 트리거하는 접두 문자. 문자열 길이는 정확히 1이어야 해요 string / array '@'
split 멘션을 구분하는 문자. 문자열 길이는 정확히 1이어야 해요 string ' '
filter-option 필터 옵션 로직 커스터마이징 false / Function —
placement 팝업 위치 설정 string 'bottom'
show-arrow 드롭다운 패널에 화살표를 표시할지 여부 boolean false
offset 드롭다운 패널의 오프셋 number 0
whole 백스페이스를 눌러 삭제할 때 멘션 내용을 통째로 삭제할지 여부 boolean false
check-is-whole 백스페이스를 눌러 삭제할 때 멘션이 통째인지 검사 Function —
loading 멘션 드롭다운 패널이 로딩 상태인지 여부 boolean false
model-value / v-model 입력 값 string —
popper-class 드롭다운 패널의 커스텀 클래스 이름 string / object ''
popper-style 2.11.5 드롭다운 패널의 커스텀 스타일 string / object —
popper-options popper.js 매개변수 object (popper.js 문서 참고) —
input props — — —

Events

Name Description Type
search prefix가 일치할 때 트리거 Function
select 사용자가 옵션을 선택할 때 트리거 Function
whole-remove 2.10.4 멘션이 통째로 제거될 때 트리거 (whole가 true이거나 check-is-whole이 true일 때) Function
input events — —

Slots

Name Description Type
label 옵션 라벨로서의 내용 object
loading 옵션 로딩으로서의 내용 —
header 드롭다운 상단의 내용 —
footer 드롭다운 하단의 내용 —
input slots — —

Exposes

Name Description Type
input el-input 컴포넌트 인스턴스 object
tooltip el-tooltip 컴포넌트 인스턴스 object
dropdownVisible 2.8.5 tooltip 표시 상태 object

타입 선언 (Type Declarations)

type MentionOption = {
  value?: string
  label?: string
  disabled?: boolean
  [key: string]: any
}

type MentionOptionProps = {
  value?: string
  label?: string
  disabled?: string
  [key: string]: string | undefined
}

더 알아보기 (Learn more)