vue 검색 입력을 사용하여 괜찮은 검색 표시줄 UX 만들기

페이지 검색 입력은 검색 상자, 검색 표시줄, 빠른 검색, 빠른 검색 등이라고도 부르며 어떠한 사이트나 웹 응용 프로그램에서도 빠질 수 없는 구성 부분이다.검색 표시줄은 보통 페이지 맨 윗부분 (왼쪽, 중간, 오른쪽) 에 위치하는데, 사용자와 사이트의 첫 번째 상호작용이다. 왜냐하면 정보를 신속하게 찾을 수 있는 방법을 제공하기 때문이다.

UX 모범 사례
UX Collective에 발표된 this one 같은 좋은 검색창에 대한 UX가 어떤 것인지에 대한 좋은 댓글이 많다.그러나 사이트/웹 응용 프로그램마다 전역 검색 입력을 실현하는 방식이 다르다.인기 있는 회사들이 어떻게 처리하는지 빠르게 봅시다.

이야기책
Storybook은 UI 구성 요소를 독립적으로 구축하는 데 널리 사용되는 오픈 소스 툴입니다.

왼쪽 돋보기 아이콘

아이콘 지우기x

esc 키를 누르면 blur 입력이 되지 않지만 입력한 텍스트

가 지워집니다.

포커스 아이콘\을 포함하고 이 아이콘은 입력할 때 사라집니다focus

\키는 focus를 입력으로 이동하고 입력한 텍스트

를 선택한다.

github
7300만 명 이상의 개발자가 GitHub을 사용하여 Git 저장소를 호스팅합니다.

왼쪽 또는 오른쪽에 돋보기 아이콘이 없음

뚜렷한 아이콘이 없음x

esc키blur는 입력을 닫지만 입력한 텍스트를 지우지 않습니다

포커스 아이콘\을 포함하고 이 아이콘은 입력할 때 사라집니다focus

\키는 입력focus으로 이동하고 텍스트

를 선택하지 않습니다.

Gmail
Gmail은 아마도 가장 환영받는 무료 전자 우편 서비스일 것이다.

왼쪽 돋보기 아이콘

아이콘 지우기x

오른쪽에 있는 검색 옵션 아이콘

을 입력합니다.

esc키blur는 입력을 닫지만 입력한 텍스트를 지우지 않습니다

포커스 아이콘 없음\

\키는 focus부터 입력

까지 이동하지 않습니다.

Your website, depending on the UX that you are trying to achieve, might require a different combination of these features.

하지만 Vue를 사용하고 있다면 두려워하지 마세요.JS3는 너의 전단 프레임으로😉), vue-search-input 이미 당신을 위해 보험에 가입했습니다.

vue 검색 입력vue-search-input는 Vue입니다.JS3 검색 입력 구성 요소는 Storybook와 GitHub의 전역 검색 입력에서 영감을 얻었습니다.기본적으로 끝이 없지만, 샘플 스타일시트와 필요한 모든 기능을 포함하여, 사용자의 용례를 위한 완벽한 검색 표시줄 체험을 할 수 있습니다.

기능이 일목요연하다

키보드의 / 키를 누르면 언제든지 검색 입력에 관심을 가질 수 있습니다.

는 기본 CSS 스타일을 포함하지만 자신만의 스타일을 가져오기 쉽다.

검색 입력의 오른쪽에 x 아이콘이 표시되어 입력에 값을 입력할 때 텍스트를 지울 수 있습니다.

검색 입력에 초점이 있을 때(설정 가능) esc 키를 누르면 검색 텍스트를 지울 수 있습니다.

props를 통해 완전히 맞춤형으로 제작할 수 있는 행위.

는 slots를 통해 아이콘을 사용자 정의할 수 있습니다.

설치 및 사용
사용npm 설치

npm i vue-search-input

응용 프로그램으로 가져오기

import SearchInput from 'vue-search-input'

가져오기 스타일 선택 가능

import 'vue-search-input/dist/styles.css'

귀속된 반응 변수와 함께 템플릿에서 사용

<SearchInput v-model="searchVal" />

props 및 slots를 사용하여 사용자 정의

도구
도구를 사용하여 행동을 사용자 정의하고 기능을 열거나 닫을 수 있습니다.
성함
타입
약속을 어기다
묘사
타입
꿰미search입력 필드의 유형입니다.허용되는 유형은 search 및 text모델 값(v형)
꿰미
입력 값''포장류
꿰미
패키지 div의 기본 CSS 클래스search-input-wrapper검색 아이콘
부울 값
검색 아이콘 표시
맞다
짧은 머리
부울 값
바로 가기 아이콘 표시
맞다
clearIcon
부울 값
명문 아이콘 표시
맞다
HideShortcutionBlur
부울 값
초점을 잃을 때 단축키 아이콘을 숨길지 여부를 입력하십시오
맞다
clearOnEsc
부울 값esc 키를 눌렀을 때 입력 필드를 지울지 여부
맞다
blurOnEsc
부울 값esc 키를 눌렀을 때 입력 필드에서 초점을 옮길지 여부
맞다
초점 선택
부울 값/키를 눌러 입력한 텍스트를 선택합니다.
맞다
shortcutListenerEnabled
부울 값
버튼 사용
맞다
단축키
꿰미
단축키 기능용 /key
슬롯/에는 기본 아이콘이 포함되어 있지만 필요에 맞게 사용자 정의할 수 있는 vue-search-input를 사용할 수도 있습니다.
성함
묘사
기본 내용
검색 아이콘
검색 아이콘의 슬롯slots바로 가기 아이콘
바로 가기 아이콘 슬롯<i class="search-icon search"></i>아이콘 지우기
아이콘 슬롯 지우기<i class="search-icon shortcut" title='Press "/" to search'></i> 입력 지우기 기능{ clear: () => void }덧붙이다
패키지의 검색 아이콘을 입력하기 전에 항목 추가
-
추가 내부
패키지에 검색 아이콘을 입력한 후 항목 추가
-
미리 편집하다
요소를 입력한 후 직접 입력 포장에 하나를 추가합니다
-
프리 커브 외부 나사
아이콘 지우기 후 입력 패키지에 직접 추가
-

예제 프레젠테이션
Storybook, GitHub, Gmail, 유튜브의 검색 표시줄 기능을 시뮬레이션한 예시 online demo를 보십시오!
https://vue-search-input.vercel.app
만약 네가 그것을 좋아한다면 <button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>, 네가 그것을 방문해서 repo on GitHub 별을 주면 정말 좋겠다.
읽어주셔서 감사합니다!