InputTag

InputTag

출처: 문서

본문

InputTag 컴포넌트는 사용자가 내용을 태그 형태로 추가할 수 있게 해 주는 컴포넌트예요. 여러 개의 값을 태그로 입력받을 때 쓰면 좋아요.

기본 사용 (Basic Usage)

Enter 키를 누르면 입력한 내용이 태그로 추가돼요.

커스텀 트리거 (Custom Trigger)

태그 입력을 트리거하는 키를 커스터마이즈할 수 있어요. 기본 키는 Enter예요.

<template>
  <div class="demo-input-tag">
    <el-input-tag v-model="input" :trigger="trigger" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { EVENT_CODE } from 'element-plus'

const trigger = ref('Space')
const input = ref()
const options = [EVENT_CODE.enter, EVENT_CODE.space]
</script>

최대 태그 수 (Maximum Tags)

추가할 수 있는 태그 수의 제한을 설정할 수 있어요. max 속성을 쓰면 돼요.

태그 접기 (Collapse Tags) 2.11.0

collapse-tags 속성을 사용해 여러 태그를 하나의 텍스트로 접을 수 있어요. collapse-tags-tooltip 속성으로 접힌 텍스트에 마우스를 올리면 선택된 특정 값을 표시하는 동작을 활성화할 수 있어요. collapse-tags-tooltip 속성을 사용하면 max 속성은 무효가 돼요.

Disabled

InputTag를 비활성화할 수 있어요.

Clearable

지우기 버튼을 표시할지 설정할 수 있어요.

커스텀 클리어 아이콘 (Custom Clear Icon) 2.11.0

clear-icon 속성을 설정해 클리어 아이콘을 커스터마이즈할 수 있어요.

드래그 가능 (Draggable)

태그를 드래그할 수 있는지 설정할 수 있어요. draggable 속성을 쓰면 돼요.

구분자 (Delimiter) 2.9.9

구분자(delimiter)가 일치하면 태그를 추가할 수 있어요. delimiter 속성에 문자열이나 정규식을 넘길 수 있어요.

크기 (Sizes)

size 속성을 추가해 InputTag의 크기를 바꿀 수 있어요. 기본 크기 외에 large와 small 두 가지 옵션이 더 있어요.

커스텀 태그 (Custom Tag)

tag 슬롯으로 태그 내용을 커스터마이즈할 수 있어요.

<template>
  <el-input-tag v-model="input">
    <template #tag="{ value }">
      <el-tag :type="tagType" :effect="tagEffect">{{ value }}</el-tag>
    </template>
  </el-input-tag>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElementPlus } from '@element-plus/icons-vue'

import type { TagProps } from 'element-plus'

const type: Array = [
  'primary',
  'success',
  'info',
  'warning',
  'danger',
]
const effect: Array = ['light', 'dark', 'plain']

const tagType = ref('primary')
const tagEffect = ref('plain')
const input = ref(['tag1', 'tag2', 'tag3'])
</script>

커스텀 prefix와 suffix (Custom Prefix and Suffix)

prefix와 suffix 슬롯으로 InputTag의 접두어와 접미어를 커스터마이즈할 수 있어요.

API

Attributes

Name Description Type Default
model-value / v-model binding value array —
max max number tags that can be enter number —
tag-type tag type enum info
tag-effect tag effect enum light
effect 2.13.2 tooltip theme, built-in theme: dark / light enum / string light
trigger the key to trigger input tag enum Enter
draggable whether tags can be dragged boolean false
delimiter 2.9.9 add a tag when a delimiter is matched string / regex —
size input box size enum —
collapse-tags 2.11.0 whether to collapse tags to a text when multiple selecting boolean false
collapse-tags-tooltip 2.11.0 whether show all selected tags when mouse hover text of collapse-tags. To use this, collapse-tags must be true boolean false
save-on-blur 2.9.7 whether to save the input value when the input loses focus boolean true
clearable whether to show clear button boolean false
clear-icon 2.11.0 custom clear icon component string / object CircleClose
disabled whether to disable input-tag boolean false
validate-event whether to trigger form validation boolean true
readonly same as readonly in native input boolean false
autofocus same as autofocus in native input boolean false
id same as id in native input string —
tabindex same as tabindex in native input string / number —
max-collapse-tags 2.11.0 the max tags number to be shown. To use this, collapse-tags must be true number 1
maxlength same as maxlength in native input string / number —
minlength same as minlength in native input string / number —
placeholder placeholder of input string —
autocomplete same as autocomplete in native input string off
aria-label a11y native aria-label attribute string —

Events

Name Description Type
change triggers when the modelValue change Function
input triggers when the input value change Function
add-tag triggers when a tag is added Function
remove-tag triggers when a tag is removed Function
drag-tag 2.11.3 triggers when a tag is dragged Function
focus triggers when InputTag focuses Function
blur triggers when InputTag blurs Function
clear triggers when the clear icon is clicked Function

Slots

Name Description Type
tag content as tag object
prefix content as InputTag prefix —
suffix content as InputTag suffix —

Exposes

Name Description Type
focus focus the input element Function
blur blur the input element Function

더 알아보기 (Learn more)