vue search input

vue 검색 입력

Storybook 및 GitHub의 전역 검색 입력에서 영감을 받은 Vue.js 3 검색 입력 구성 요소입니다.

SearchInput 구성 요소는 몇 가지 추가 기능이 내장된 검색 입력을 표시합니다.

특징:

• 언제든지 키보드의 / 키를 눌러 검색 입력에 집중하세요 .
• 기본 CSS 스타일이 포함되어 있지만 자신만의 스타일을 가져오기도 쉽습니다.
• slots 을 통해 완전히 사용자 정의 가능한 아이콘
• 검색 입력 오른쪽에 x 아이콘을 표시합니다. 내부에 입력된 값이 있을 때 텍스트를 지우는 데 사용됩니다.
• 검색 입력에 초점이 있을 때(구성 가능) esc 키를 누르면 검색 텍스트가 지워집니다.

중요: 각 페이지에 SearchInput 구성 요소를 한 번만 포함하는 것이 좋습니다.
여러 SearchInput 구성 요소가 있는 경우 표시되는 첫 번째 구성 요소는 / 키를 누를 때 포커스 우선 순위를 갖습니다.

예제가 포함된 데모

https://vue-search-input.vercel.app

설치

npm i vue-search-input

용법

 < template >
  < SearchInput v-model =" searchVal " />
</ template >

< script >
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'

const searchVal = ref ( '' )

export default {
  components : {
    SearchInput
  } ,
  setup ( ) {
    return {
      searchVal
    }
  }
}
</ script > 

스타일링

vue-search-input 자신만의 CSS를 생성하기 위한 기반으로 사용할 수 있는 기본 스타일( dist/styles.css )이 포함되어 있습니다. 모든 구성 요소 요소는 아이콘과 입력에 대한 래퍼 역할을 하는 div 내에 있습니다. 래퍼 div 의 기본 클래스는 search-input-wrapper 입니다. SearchInput 구성 요소에 클래스를 제공하여 이를 재정의할 수 있습니다.

SearchInput 구성 요소에 바인딩된 클래스와 스타일이 래퍼 div 에 추가됩니다.

이벤트

SearchInput 구성 요소에 바인딩된 이벤트는 input 요소로 전달됩니다.

이름	설명	반환된 값
업데이트:모델값	업데이트된 바운드 모델	string

소품

이름	유형	설명	기본
유형	끈	입력 필드의 유형입니다. 허용되는 유형은 search 및 text 입니다.	search
modelValue(v-모델)	끈	입력 값	''
래퍼 클래스	끈	래퍼 div의 기본 CSS 클래스	search-input-wrapper
검색아이콘	부울	"검색" 아이콘을 표시합니다.	진실
바로가기아이콘	부울	"바로가기" 아이콘을 표시합니다.	진실
클리어아이콘	부울	"일반 텍스트" 아이콘을 표시합니다.	진실
숨기기바로가기아이콘켜기흐림	부울	입력이 포커스를 잃었을 때 바로가기 아이콘을 숨길지 여부	진실
ClearOnEsc	부울	esc 키를 눌렀을 때 입력 필드를 지울지 여부	진실
BlurOnEsc	부울	esc 키를 눌렀을 때 입력 필드에서 포커스를 끌지 여부	진실
selectOnFocus	부울	/ 키를 누를 때 입력 텍스트를 선택합니다.	진실
바로가기리스너 활성화됨	부울	/ 키 누르기 기능을 활성화합니다.	진실
단축키	끈	바로가기 기능의 key	/

슬롯

vue-search-input 일부 기본 아이콘이 포함되어 있지만 사용 가능한 slots 사용하여 필요에 맞게 사용자 정의할 수도 있습니다.

이름	설명	기본 콘텐츠
검색 아이콘	검색 아이콘용 슬롯	<i class="search-icon search"></i>
바로가기 아이콘	바로가기 아이콘용 슬롯	<i class="search-icon shortcut" title='Press "/" to search'></i>
클리어 아이콘	투명 아이콘용 슬롯 { clear: () => void } 입력을 지우는 함수	<button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
추가	검색 아이콘 앞에 입력 래퍼 내부에 항목을 추가합니다.	-
내부 추가	검색 아이콘 뒤에 입력 래퍼 내부에 항목을 추가합니다.	-
앞에 추가	입력 요소 바로 뒤에 입력 래퍼 내부에 항목을 추가합니다.	-
외부 앞에 추가	지우기 아이콘 바로 뒤에 입력 래퍼 내부에 항목을 추가합니다.	-