Smart-Tagz - Vue용 입력 태그 컴포넌트

특징

✅ Autosuggest - 간편한 키보드 선택으로 Autosuggest를 지원합니다.

✅ 편집 가능한 태그 - 태그를 두 번 클릭하여 인라인으로 태그를 편집할 수 있습니다.

✅ 붙여넣기 시 태그 생성 - 선택한 구분 기호로 문자열을 붙여넣으면 구성 요소가 자동으로 태그를 생성합니다.

✅ 손쉬운 태그 삭제 - 삭제 또는 백스페이스로 쉽게 태그를 삭제합니다.

✅ 빠른 삭제 - CTRL + A, DEL 또는 백스페이스를 사용하여 모든 태그를 빠르게 삭제합니다.

✅ 사용자 지정 색 구성표 지원 - 손쉬운 색 구성표 사용자 지정.

✅ Composition API - 최신 Composition API를 사용하여 구축되었습니다.

설치

yarn install smart-tagz

시작하기

<template>
  <smart-tagz
    autosuggest
    editable
    inputPlaceholder="Select Countries ..."
    :sources="sources"
    :allowPaste="{delimiter: ','}"
    :allowDuplicates="false"
    :maxTags="20"
    :defaultTags="['United Kingdom', 'Uruguay', 'Uzbekistan']"
  />
</template>

<script>
import { SmartTagz } from "smart-tagz";
import "smart-tagz/dist/smart-tagz.css";

export default {
  name: "Basic",
  components: {
    SmartTagz,
  }
};
</script>

💡 자동 제안

자동 제안 설정이 훨씬 쉬워졌습니다. 데이터 소스를 구성하면 좋습니다.

<smart-tagz autosuggest :sources="sources" />

✏ 쉬운 편집

edit 모드가 활성화된 상태에서 태그를 두 번 클릭하면 태그를 쉽게 변경할 수 있습니다.

<smart-tagz editable />

🧹빠른 삭제

때로는 모든 태그를 빠르게 지우고 처음부터 시작하는 것이 좋습니다. quick delete 모드를 사용하면 한 번에 모든 태그를 선택하고 지울 수 있습니다.

CTRL + A를 눌러 모든 태그를 선택하고 DEL 키를 사용하여 태그를 지웁니다.

<smart-tagz quick-delete />

🔒 읽기 전용 태그

읽기 전용 모드에서는 새 태그를 추가할 수 없으며 설정된 기본 태그는 삭제할 수 없습니다.

<smart-tagz read-only />

🌈 테마 지원

쉽게 색상을 사용자 정의하십시오.

<smart-tagz
  :theme="{
    primary: '#545454',
    background: '#bdbdbd',
    tagTextColor: '#fff',
  }"
/>

이 구성 요소에는 더 많은 기능이 있습니다. 모든 기능을 사용하려면 데모 사이트를 방문하십시오.

📺 https://smart-tagz.vercel.app/

프라브후이뇨토 / 스마트 태그

Vue용 스마트 입력 태그

피드백과 기여를 환영합니다.