홈페이지>프로그래밍 관련>기타 소스코드
다운로드

vue-간단한 제안

간단하면서도 기능이 풍부한 Vue.js용 자동 완성 구성 요소

설치하다 

npm install --save vue-simple-suggest

추가 옵션은 설치 가이드를 참조하세요.

목차

  • vue-간단한 제안
    • 설치하다
    • 목차
    • 그것은 무엇입니까?
      • 특징
      • 새로운 기능?
    • 예:
      • 간단한 예
      • 비동기 예시
    • 설치
      • NPM
      • 패키지 해제
      • 가져오기
        • 폴리필
      • 용법
    • 빌드 설정
    • 기본 컨트롤
    • 구성요소 API
      • TLDR
      • CSS 클래스 구조
        • 전환
      • API 정의
        • 소품
          • 방법
        • 방출된 이벤트
        • 참조 방법
        • Ref 이벤트 핸들러
        • 참조 데이터
      • 슬롯
        • 맞춤 입력
        • 사용자 정의 입력에 대한 접근성
        • 맞춤 제안 항목
        • 맞춤형 기타 아이템 슬롯
    • 기여자

그것은 무엇입니까?

이는 Vue.js를 위한 간단하면서도 기능이 풍부한 제안/자동 완성 구성 요소입니다.

실제로 기능이 너무 풍부해서 다음과 같은 미친 작업을 수행하는 것이 가능합니다.

  • 드롭다운 및 드롭다운 메뉴 모방
  • 제안 목록을 실제 제안 테이블로 전환
  • 전달된 모든 유형의 사용자 정의 입력(예: 유형=버튼, 라디오 등)으로 작업합니다.
  • ... 그리고 더 많은 것들

그리고 보너스로 굉장히 가볍습니다.

특징

  • v-model 지원.
  • 자동 접근성 속성(WAI-ARIA 완료)
  • v-model 유형 전환(선택/입력)
  • 기본 슬롯을 통한 사용자 정의 입력 요소입니다.
  • 명명된 범위 슬롯을 통한 사용자 정의 목록 항목입니다.
  • 기본 입력 요소에 대한 모든 HTML5 유효한 소품이 제공됩니다( type , tabindex 등...).
  • 사용자 정의 가능한 키보드 컨트롤.
  • 풍부하고 간단한 API.
  • 빠르고 쉽게 스타일을 변경할 수 있는 CSS 클래스입니다.
  • 선택할 수 있는 다양한 빌드 변형.
  • 유연하고 사용자 정의 가능한 구성 요소 설계.
  • lib에서 가져올 수 있는 IE용 선택적 폴리필입니다.

모든 소품, 이벤트 및 슬롯은 이 구성 요소에 대한 선택 사항이므로 전혀 구성 없이 사용할 수 있습니다.

새로운 기능?

중요한 것이 빠졌다고 생각되면(또는 버그를 발견했다면) 자유롭게 이슈를 만들어주세요. :)

예:

구성요소를 사용하려면 NPM을 통해 설치하세요.

npm install --save vue-simple-suggest

그런 다음 Vue.js 구성 요소/페이지에서 다음을 수행하십시오.

간단한 예

정적 배열에서 항목을 제안해야 하는 경우: 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :filter-by-query =" true " >
<!-- Filter by input text to only show the matching results -->
  </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      simpleSuggestionList ( ) {
        return [
          'Vue.js' ,
          'React.js' ,
          'Angular.js'
        ]
      }
    }
  }
</ script >

비동기 예시

서버의 비동기 데이터를 처리하는 경우(예: https://swapi.co/ 사용): 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    display-attribute =" name "
    value-attribute =" url "
    :list =" getSuggestionList "
  > </ vue-simple-suggest >

  < br >

  < p > Chosen element: {{ chosen }} </ p >
</ template >

< script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components : {
      VueSimpleSuggest
    } ,
    data ( ) {
      return {
        chosen : ''
      }
    } ,
    methods : {
      // Function returning a promise as a factory for suggestion lists.
      //
      // vue-simple-suggest calls it automatically when an update to the list is needed,
      // no need for watchers here!
      getSuggestionList ( ) {
        return fetch ( 'https://swapi.co/api/people' , { method : 'GET' } )
          . then ( response => response . json ( ) )
          . then ( json => json . results ) ; /*
          returns a promise with a list of star-wars characters
        */
      }
    }
  }
</ script >

더 고급 예제(wikipedia 검색 사용)를 보려면 예제 소스를 참조하세요.

설치

NPM 

npm install --save vue-simple-suggest
# or
yarn add vue-simple-suggest

패키지 해제

이 방법을 통해 포함하는 경우 구성 요소가 자동으로 설치됩니다. 

 <!-- UMD Component, async/await polyfills through promises -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest " > </ script >
< script type =" text/javascript " src =" https://unpkg.com/[email protected] " > </ script >
                                                              <!-- Specific version -->

<!-- CSS -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-simple-suggest/dist/styles.css " >

<!-- If you need polyfills, use IIFE verision below -->
<!-- IIFE build includes ALL polyfills: Object.assign, Promises, Generators, Async/Await! -->
< script type =" text/javascript " src =" https://unpkg.com/vue-simple-suggest/dist/iife.js " > </ script >

가져오기 

 /// ESNext (original code, no pollyfills, single-file .vue component, css included)
import VueSimpleSuggest from 'vue-simple-suggest/lib'
///

/// ES6 (async polyfills)
import VueSimpleSuggest from 'vue-simple-suggest'
// or, if you have problems importing:
import VueSimpleSuggest from 'vue-simple-suggest/dist/es6'
///

/// ES7 and above (no polyfills)
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
///

/// CommonJS (async, arrow-functions and promises are polyfilled)
const VueSimpleSuggest = require ( 'vue-simple-suggest' )
// or, if you have problems importing:
const VueSimpleSuggest = require ( 'vue-simple-suggest/dist/cjs' )
///

// Optional - import css separately with css loaders:
import 'vue-simple-suggest/dist/styles.css'

폴리필

v1.8.3 의 새로운 기능

vue-simple-suggest IE11+에 대한 최소한의 선택적 폴리필( Object.assign , Element.prototype.closest 및 Element.prototype.matches 이 함께 제공됩니다. 다음과 같이 가져올 수 있습니다. 

 import 'vue-simple-suggest/lib/polyfills' ;
// or
require ( 'vue-simple-suggest/lib/polyfills' ) ;

용법

글로벌: 

 // You don't need to do it, if including via <script> (umd, iife)
Vue . component ( 'vue-simple-suggest' , VueSimpleSuggest )

단일 파일 .vue 구성 요소에서: 

 < script >
  import VueSimpleSuggest from 'vue-simple-suggest'
  import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

  export default {
    components : {
      VueSimpleSuggest
    }
  }
</ script >

빌드 설정 

 # clone the repo
git clone https://github.com/KazanExpress/vue-simple-suggest.git
cd ./vue-simple-suggest

# install dependencies
npm install

# serve example with hot reload at localhost
npm run dev

# build example & readme for static serving
npm run docs

기본 컨트롤

v1.2.0의 새로운 기능

이는 기본 키보드 단축키입니다.

controls 소품으로 사용자 정의할 수 있습니다. 이 controls 개체의 모든 필드는 선택 사항입니다.

기본 구성표:

키(키코드) 설명
Escape (27) 제안 목록이 표시되면 숨깁니다. hideList 속성으로 정의됩니다.
ArrowDown (40) 제안 목록이 숨겨져 있으면 표시하세요. showList 속성으로 정의됩니다.
ArrowUp (38) / ArrowDown (40) 제안 사항을 순환(호버)합니다. selectionUp / selectionDown 속성에 따라 각각 정의됩니다.
Enter (13) 목록이 표시되면 - 강조 표시된 요소를 선택합니다. select 속성으로 정의됩니다.
(Ctrl/Shift) + Space (32) 목록에서 첫 번째 요소를 선택합니다. autocomplete 속성으로 정의됩니다. Ctrl 수정자 키 또는 Shift 수정자 키와 함께 작동합니다.
(Ctrl/Shift) + Enter (13) 이전과 동일하지만 제안 목록도 숨깁니다.

JS 객체: 

 {
  selectionUp : [ 38 ] ,
  selectionDown : [ 40 ] ,
  select : [ 13 ] ,
  showList : [ 40 ] ,
  hideList : [ 27 ] ,
  autocomplete : [ 32 , 13 ]
}

구성요소 API

TLDR

펼치려면 클릭하세요. 
 <!-- Ref to access the API, v-model for efficient query binding -->
< vue-simple-suggest ref =" vueSimpleSuggest " v-model =" model "
  value-attribute =" id "
  display-attribute =" title "
  mode =" input "
  placeholder =" placeholder!!! "
  :list =" getListFunction "
  :max-suggestions =" 10 "
  :min-length =" 3 "
  :debounce =" 100 "
  :destyled =" false "
  :remove-list =" false "
  :filter-by-query =" false "
  :filter =" customFilterFunction "
  :value =" defaultValue "
  :nullable-select =" true "
  :controls =" {
    selectionUp: [38, 33],
    selectionDown: [40, 34],
    select: [13, 36],
    showList: [40],
    hideList: [27, 35],
    autocomplete: [32, 13],
  } "
  @input =" onInputEvent "
  @select =" onSuggestSelect "
  @hover =" onSuggestHover "
  @focus =" onFocus "
  @blur =" onBlur "
  @request-start =" onRequestStart "
  @request-done =" onRequestDone "
  @request-failed =" onRequestFailed "
  @show-list =" onShowList "
  @hide-list =" onHideList "
>
  <!-- v-model on input itself is useless -->
  < input class =" optional-custom-input " >

  <!-- Appears o top of the list -->
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  < div slot =" suggestion-item " slot-scope =" { suggestion } " class =" custom " > {{ suggestion.title }} </ div >

  <!-- Appears below the list -->
  < div class =" misc-item " slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" loading " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

CSS 클래스 구조

구성 요소의 모양을 사용자 정의해야 하는 경우 내부 클래스 구조는 다음과 같습니다. 

 // .designed is applied only if `destyled` prop is false.
.vue-simple-suggest.designed.focus // .focus is applied whenever the component is focused.
  .input-wrapper
    .default-input // Replaced with your custom input if default slot is provided.
  .suggestions // Also has transition classes, see below.
    .suggest-item

기존 클래스나 Bootstrap과 같은 프레임워크를 사용하려는 경우 'styles' 소품을 사용하여 자신만의 클래스를 삽입할 수 있습니다. 

 <!-- Some component.vue -->
< template >
  < vue-simple-suggest
    v-model =" chosen "
    :list =" simpleSuggestionList "
    :styles =" autoCompleteStyle "
    :destyled = true
    :filter-by-query =" true " >
  </ vue-simple-suggest >
</ template >

< script >
  ...
  export default {
    ...
    data ( ) {
      return {
        autoCompleteStyle : {
          vueSimpleSuggest : "position-relative" ,
          inputWrapper : "" ,
          defaultInput : "form-control" ,
          suggestions : "position-absolute list-group z-1000" ,
          suggestItem : "list-group-item"
        }
      }
    } ,
    ...
  }
</ script > `

< style lang =" scss " >
.z-1000 {
  z-index: 1000;
}
.hover {
  background-color: #007bff;
  color: #fff;
}
</ style >

계획:

재산 설명
vueSimpleSuggest 구성 요소의 루트 요소에 대한 추가 클래스 이름입니다.
inputWrapper .input-wrapper 요소에 대한 추가 클래스 이름입니다.
defaultInput 사용자 정의 입력 구성 요소가 제공되지 않은 경우 input 요소에 대한 추가 클래스 이름입니다.
suggestions 제안 목록 ul 요소에 대한 추가 클래스 이름입니다.
miscItemAbove misc-item-above 슬롯 래퍼에 대한 클래스 이름( li 요소 자체)
suggestItem 제안 항목 li 요소의 추가 클래스 이름입니다.
miscItemBelow misc-item-below 슬롯 래퍼의 클래스 이름( li 요소 자체)

전환

v1.8.0의 새로운 기능

.suggestions div에 vue-simple-suggest 라는 전환에 대한 CSS 규칙을 정의하여 사용자 정의 목록 전환을 정의할 수도 있습니다. 

. suggestions {
  /* It's improtant to have a cpecific pivot point for transition:*/
  opacity : 1 ;
}

. vue-simple-suggest-enter-active . suggestions ,
. vue-simple-suggest-leave-active . suggestions {
  /* Transition length here:*/
  transition : opacity .2 s ;
}

. vue-simple-suggest-enter . suggestions ,
. vue-simple-suggest-leave-to . suggestions {
  /* Transition rule for "disengaged" element:*/
  opacity : 0 ;
}

API 정의

소품

이름 유형 기본 설명
v1.2.0을 controls 물체 기본 컨트롤 보기 브라우저 호환성을 위해 키 코드의 키보드 단축키를 결정합니다. 배열은 하나의 작업에 여러 키를 할당하는 기능을 제공합니다. 5개의 배열 필드( selectionUp , selectionDown , select , hideList 및 autocomplete )로 구성되며 모두 선택 사항입니다.
max-suggestions 숫자 10 표시할 최대 제안 수입니다. 무한 제안을 하려면 0으로 설정하세요.
min-length 숫자 1 제안 목록을 트리거하기 위한 입력의 최소 기호 양입니다. vue-simple-suggest 값이 0이면 드롭다운 메뉴로 작동하기 시작합니다.
display-attribute 끈 'title' 목록에 표시할 제안 개체의 속성입니다. 점선 경로를 지원합니다.
value-attribute 끈 'id' 고유 키로 사용할 제안 개체의 속성입니다. 점선 경로를 지원합니다.
list 함수 또는 배열 () => [] 배열 공급자 함수는 쿼리를 유일한 인수로 받아들여야 합니다. 배열이나 약속을 반환할 수 있습니다. 비동기식일 수 있습니다. 이 기능이 없으면 구성요소는 단순 입력으로 작동합니다.
debounce 숫자 0 list 디바운스(입력 이벤트와 함수 실행 사이의 시간)를 결정합니다.
destyled 부울 false 입력 및 제안 목록의 기본 스타일을 취소할지 여부입니다.
styles v1.8.0 물체 {} 현재 구성 요소 스타일로 연결할 CSS 클래스입니다.
remove-list 부울 false true인 경우 제안 목록이 항상 숨겨집니다.
filter-by-query 부울 false 입력의 텍스트 쿼리를 기준으로 결과 제안을 필터링할지 여부(검색 구성 요소로 지정)
filter 기능 - 단일 항목과 필터링 기준이 되는 쿼리를 2개의 인수로 받아들이는 제안 결과를 필터링하기 위한 맞춤 함수입니다. filter-by-query true 로 설정된 경우에만 사용됩니다.
mode v1.4.0 끈 'input' v-model 이벤트. v-model 트리거하는 이벤트를 결정합니다. 'input' ( v-model 표시된 속성을 바인딩) 또는 'select' ( v-model 선택한 항목을 바인딩) 중 하나일 수 있습니다.
type , value , pattern 등... 모든 HTML5 입력 속성과 해당 기본값이 적용됩니다.
nullable-select v1.9.0 부울 false select null 허용해야 하는지 여부입니다.
preventHide v1.11.0 부울 false 사용자가 여러 입력을 선택할 수 있도록 입력을 열어 둘지 여부
방법

v1.4.0의 새로운 기능

v-model 트리거하는 이벤트를 결정합니다. 'input' (기본값) 또는 'select' 중 하나일 수 있습니다.

예를 들어 'input' 선택한 경우 v-model은 input 이벤트가 발생할 때마다 값을 업데이트하여 입력 문자열을 설정합니다.

'select' 에도 동일합니다. v-model은 목록에서 항목을 선택한 경우에만 변경되며 선택한 값(문자열, 객체 등)을 해당 인수로 설정합니다.

선택 바인딩 및 텍스트 바인딩을 위한 사용자 정의 입력에만 구성 요소를 사용하려는 경우에 대한 적절한 사용 사례는 다음과 같습니다. 

 < vue-simple-suggest v-model =" selected " mode =" select " >
  < input v-model =" text " >
</ vue-simple-suggest >

방출된 이벤트

이름 인수 설명
input HTML 입력 이벤트 현재 입력 이벤트의 외부 투영입니다.
focus HTML 포커스 이벤트 현재 입력 이벤트의 외부 투영입니다.
blur HTML 포커스 이벤트 현재 입력 이벤트의 외부 투영입니다.
select 선택된 제안 제안 선택 시 실행됩니다(마우스 클릭 또는 Enter 키 누르기를 통해).
hover 마우스오버된 제안, 대상 요소 커서 이동이나 키보드 화살표를 통해 새 제안이 강조 표시될 때마다 실행됩니다.
suggestion-click 선택된 제안, HTML 클릭 이벤트 제안 요소 클릭 시 실행됩니다.
show-list - 제안 목록이 표시되도록 전환될 때마다 실행됩니다.
hide-list - 제안 목록이 숨겨질 때마다 실행됩니다.
request-start 현재 입력값(쿼리) list 함수가 실행을 시작할 때마다 발생합니다.
request-done 결과 제안 목록 list 함수가 결과를 성공적으로 반환하고 해당 결과를 인수로 전달할 때 발생합니다.
request-failed 방해하는 예외 list 기능을 실행하는 동안 예외가 발생하면 발생합니다.

참조 방법

$refs.*your ref name here*

이름 인수 설명
showList - 제안 목록을 표시합니다. 존중되는 이벤트를 내보냅니다.
hideList - 제안 목록을 숨깁니다. 존중되는 이벤트를 내보냅니다.
getSuggestions query : 문자열 list 소품에서 제안을 가져오고 처리합니다. 약속을 반환합니다. requestStart , requestDone 및 requestFailed 이벤트를 내보냅니다.
research - 현재 입력 값에 대한 getSuggestions 디바운스했습니다.
clearSuggestions - suggestions 배열을 지웁니다.
select 제안 전달된 제안을 선택합니다. 존중되는 이벤트를 내보냅니다.
hover 제안 전달된 제안 위로 마우스를 가져갑니다. 존중되는 이벤트를 내보냅니다.
displayProperty 제안 제안의 표시된 속성을 반환합니다.
valueProperty 제안 제안의 값 속성을 반환합니다.
setText v1.9.0 텍스트 입력 필드에 사용자 정의 텍스트를 안정적으로 설정합니다.
autocompleteText v1.10.0 제안 유일한 인수로 전달된 제안을 사용하여 입력 텍스트를 자동 완성합니다.

Ref 이벤트 핸들러

$refs.*your ref name here*

이를 사용하여 구성 요소의 일부 동작을 모방할 수 있습니다.

이름 인수 설명
onShowList 제안 목록을 표시해야 할 때 호출됩니다.
showSuggestions 제안 목록을 표시하고 필요한 경우 데이터를 새로 고칩니다.
onInput HTML 입력 이벤트 입력 텍스트가 변경될 때마다 호출됩니다. input 이벤트를 내보냅니다.
onFocus HTML 포커스 이벤트 입력에 포커스가 맞춰질 때마다 호출되며 focus 이벤트를 발생시킵니다.
onBlur HTML 포커스 이벤트 onFocus 의 반대말입니다.
onAutocomplete - 자동 완성 키보드 단축키를 누르면 호출됩니다. 첫 번째 제안을 선택합니다.
onListKeyUp HTML 키업 이벤트 구성요소 키업 시 호출됩니다. 목록을 숨기기 위해 내부적으로 사용됩니다.
onKeyDown HTML 키다운 이벤트 구성요소 keydown 시 호출됩니다. 목록 표시, 제안 업데이트 및 양식 제출 방지를 위해 내부적으로 사용됩니다.
moveSelection 마우스를 올려 놓은 요소를 변경해야 할 때 호출됩니다.
suggestionClick suggestion , HTML 클릭 이벤트 제안 클릭 시 호출됩니다. 구성 요소 외부에서 이러한 클릭을 에뮬레이트하는 데 사용할 수 있습니다.

참조 데이터

$refs.*your ref name here*

이름 기본 설명
selected null 현재 선택된 요소입니다.
hovered null 현재 호버링된 요소입니다.
suggestions [] 현재 제안 목록.
textLength 0 입력의 텍스트 길이입니다.
listShown false 제안 목록이 표시됩니다.
inputElement null 현재 HTMLInputElement를 사용하고 있습니다.
canSend true 할당된 getListFuncion을 실행할 수 있는지 여부입니다.
timeoutInstance null 다음 getListFunction 실행까지의 시간 초과입니다.
text $props.value 현재 입력 텍스트.
slotIsComponent false 현재 사용자 정의 입력이 vue-commandre인지 여부입니다.
listIsRequest - 목록 소품이 함수인지 여부입니다.
input - 현재 입력(컴포넌트 또는 바닐라)에 대한 참조입니다.
hoveredIndex - 현재 가리키고 있는 요소 인덱스입니다.
controlScheme 기본 컨트롤 현재 제어 방식입니다.
isPlainSuggestion false 현재 제안 목록이 일반 문자열(객체 아님)로 구성되어 있는지 여부입니다.
isClicking false 사용자가 현재 클릭하고 있으면 true .
isOverList false 사용자가 현재 제안 목록 위로 마우스를 가져가면 true 입니다.
isInFocus false 구성요소에 현재 초점이 맞춰져 있으면 true .
isTabbed false 구성요소에 초점이 맞춰져 있는 동안 사용자가 탭을 눌렀다면 true .
isSelectedUpToDate false 사용자가 마지막 선택 이후 아무런 입력도 하지 않았으므로 선택 항목이 여전히 관련이 있으면 true .

슬롯

맞춤 입력

기본 슬롯(선택 사항)

중첩을 지원합니다. vue-simple-suggest에 의한 처리를 피하기 위해 입력 소품을 사용자 정의 입력으로 전달할 수 있습니다. 기본값은 vue-simple-suggest에 props가 전달된 간단한 입력입니다.

경고: 사용자 정의 입력의 v-model vue-simple-suggest의 v-model 과 동일하지 않습니다! 

 <!--  Default HTMLInputElement example:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " pattern =" [a-z]+ "/>
 <!--  Vanilla HTMLInputElement example 1:  -->
< vue-simple-suggest >
  < input pattern =" [a-z]+ " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 2:  -->
< vue-simple-suggest v-model =" model " placeholder =" Text here " type =" search " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 3 (fully equivalent to the second example):  -->
< vue-simple-suggest v-model =" model " >
  < input placeholder =" Text here " type =" search " >
</ vue-simple-suggest > 
 <!--  Vanilla HTMLInputElement example 4 (nested):  -->
< vue-simple-suggest v-model =" model " >
  < div >
    < section >
      < input type =" email " >
    </ section >
  </ div >
</ vue-simple-suggest > 
 <!--  Vue component example (also supports nesting):  -->
< vue-simple-suggest v-model =" vModelGoesHere " >
  < my-custom-input-somponent :value =" initialInputValueGoesHere " > </ my-custom-input-somponent >
</ vue-simple-suggest >

사용자 정의 입력 구성요소 주의사항:

vue-simple-suggest 사용하려면 사용자 정의 입력 구성 요소가 특정 표준 동작을 따라야 합니다.

사용자 정의 입력 구성 요소는 다음을 수행해야 합니다 (올바로 작동하려면):

  • input 이벤트를 내보냅니다.
  • focus 및 blur 이벤트를 발생시킵니다.
  • value 제안을 가지고 있습니다.

사용자 정의 입력 구성 요소는 다음을 수행해야 합니다 (사용 제한을 피하기 위해).

  • 내부 입력 HTML 요소의 이벤트 전파를 중지하지 마십시오.
  • focus 및 blur 이벤트를 사용하여 원래 이벤트 인수를 전달합니다.

사용자 정의 구성 요소를 사용한 vue-simple-suggest 외부 변수 변경에 반응하지 않는 것 같으면 다음과 같이 두 구성 요소의 v-model을 동일한 변수에 바인딩합니다. 

 < vue-simple-suggest v-model =" model " >
  < my-custom-input-somponent v-model =" model " > </ my-custom-input-somponent >
</ vue-simple-suggest >
사용자 정의 입력에 대한 접근성

v1.9.0의 새로운 기능

vue-simple-suggest 사용자 정의 입력 구성 요소에 html <input> 요소가 포함되어 있는 한 기본 <input> 요소와 사용자 정의 입력에 필요한 3개의 ARIA 속성을 자동으로 주입합니다.

이러한 속성을 사용하면 화면 판독기를 사용하는 사용자가 자동 ​​완성 기능을 사용할 수 있습니다.

이름 값 설명
아리아 자동완성 "list" 텍스트 입력의 자동 완성 동작이 팝업에 가능한 값 목록을 제안하는 것임을 나타냅니다.
아리아 컨트롤 suggestions 목록의 IDREF 제안된 값을 나열하는 팝업 요소의 IDREF입니다.
아리아 활성자손 호버 옵션의 IDREF DOM 초점이 입력 요소에 남아 있는 동안 애플리케이션이 초점을 맞춘 것으로 간주하는 요소를 보조 기술이 알 수 있도록 합니다.
맞춤 제안 항목

suggestion-item 슬롯(선택 사항)

설명

목록의 제안 항목에 대한 사용자 정의 HTML 정의를 허용합니다. 기본값은 <span>{{ displayAttribute(suggestion) }}</span>

suggestion 개체와 query 텍스트를 slot-scope 속성 값으로 허용합니다. 

 <!-- Example (book suggestions): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < div > {{ suggestion.title }} by {{ suggestion.author }} </ div >
  </ div >
</ vue-simple-suggest >

추천 항목 내부의 맞춤 버튼

제안 항목에 일부 작업 버튼을 추가하려면 .stop 지시문 수정자를 사용하여 기본 suggestion-click 방지하세요. 

 <!-- Example (editable book suggestion): -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, query } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" remove(suggestion) " > remove from list </ button >
    < button @click.stop =" like(suggestion) " > add to favorites </ button >
  </ div >
</ vue-simple-suggest >

이 경우 버튼은 바인딩된 메서드만 실행하고 제안된 항목을 선택하지 않습니다.

수동 자동완성

Google 검색의 모바일 제안과 같이 입력에서 제안을 선택하는 대신 자동 완성해야 하는 경우 슬롯 범위에서 autocomplete() 함수를 사용할 수 있습니다. 

 <!-- Example: -->
< vue-simple-suggest >
  < div slot =" suggestion-item " slot-scope =" { suggestion, autocomplete } " >
    < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
    < button @click.stop =" autocomplete() " > Complete input </ button >
  </ div >
</ vue-simple-suggest >

또는 ref 메소드에서: 

 < template >
  < vue-simple-suggest ref =" suggest " >
    < div slot =" suggestion-item " slot-scope =" { suggestion } " >
      < span > {{ suggestion.title }} by {{ suggestion.author }} </ span >
      < button @click.stop =" onAutocompleteButtonClick(suggestion) " > Complete input </ button >
    </ div >
  </ vue-simple-suggest >
</ template >

< script >
export default {
  //...
  methods : {
    onAutocompleteButtonClick ( suggestion ) {
      this . $refs . suggest . autocompleteText ( suggestion ) ;
    }
  }
  //...
}
</ script >

참조 데이터

참조 필드와 협력하여 이 슬롯을 사용하여 제안 목록 동작을 대폭 변환할 수 있습니다.

가장 간단한 예 중 하나 - 결과에서 쿼리 텍스트 강조 표시: 

 < div slot =" suggestion-item " slot-scope =" scope " >
  < span v-html =" boldenSuggestion(scope) " > </ span >
</ div > 
 boldenSuggestion ( scope ) {
  if ( ! scope ) return scope ;

  const { suggestion , query } = scope ;

  let result = this . $refs . suggestComponent . displayProperty ( suggestion ) ;

  if ( ! query ) return result ;

  const texts = query . split ( / [s-_/\|.] / gm ) . filter ( t => ! ! t ) || [ '' ] ;
  return result . replace ( new RegExp ( '(.*?)(' + texts . join ( '|' ) + ')(.*?)' , 'gi' ) , '$1<b>$2</b>$3' ) ;
}

Google 도서 검색 API를 통한 결과:

맞춤형 기타 아이템 슬롯

misc-item-above 및 misc-item-below 슬롯(선택 사항)

제안 목록에 맞춤 요소가 표시되도록 허용합니다. 이러한 요소는 목록에서 절대 사라지지 않으며 선택하거나 마우스를 올려 놓을 수도 없습니다.

장식, 로더, 오류 메시지 등에 사용할 수 있습니다.

이러한 슬롯에는 기본값이 없으므로 정의될 때까지 표시되지 않습니다.

suggestions 배열과 query 텍스트를 slot-scope 속성 값으로 수락합니다. 

 <!-- Examples: -->
< vue-simple-suggest >
  < template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
    < div class =" misc-item " >
      < span > You're searching for {{ query }}. </ span >
    </ div >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
  </ template >

  < div slot =" misc-item-below " slot-scope =" { suggestions } " v-if =" isLoading " class =" misc-item " >
    < span > Loading... </ span >
  </ div >
</ vue-simple-suggest >

이러한 슬롯은 다음과 같이 빈 결과를 처리하는 데 사용될 수도 있습니다. 

 <!-- Main slot template -->
< template slot =" misc-item-above " slot-scope =" { suggestions, query } " >
  < div class =" misc-item " >
    < span > You're searching for '{{ query }}'. </ span >
  </ div >

  <!-- Sub-template if have any suggestions -->
  < template v-if =" suggestions.length > 0 " >
    < div class =" misc-item " >
      < span > {{ suggestions.length }} suggestions are shown... </ span >
    </ div >
    < hr >
  </ template >

  <!-- Show "No result" otherwise, if not loading new ones -->
  < div class =" misc-item " v-else-if =" !loading " >
    < span > No results </ span >
  </ div >
</ template >

기여자

멋진 분들에게 감사드립니다(이모지 키):


알렉세이
?
여자 이름
?
시메온 케르콜라
?
로버슨 코스타
?
로스디 카심

antoinematyja
?
마티아스 마틴
?

롭 브레인
? ?
MrWook
?
나탐
?
페트르
?
RM포가티

브라이언 몬세일즈

밀라76
?

안드리 뢰프베르크
?
브루노 몬테이로
?
한네사아메츠
?
조립식 쇠지레
?
윌 플렌
?
로리911
?
알렉스 히리아베츠
?

베누드 카니
?
헤이 크라넨

shrpne
? ?
페타 드라고스-안드레이
?
쇼이토

야마겐0915
?

이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체