셀렉트 (Select)
셀렉트 필드 컴포넌트는 옵션 목록에서 사용자가 제공하는 정보를 수집하는데 사용됩니다.
API
Components.Selects.
Components.Selects.
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
오토 포커스 활성화
Components.Selects.
대체 박스 인풋 스타일을 적용
autocomplete prop을 사용할때 검색 인풋을 위한 autocomplete prop을 설정합니다.(??)
items prop으로 넘겨진 모든 항목의 유니크한 로컬 사본을 보관합니다.
Changes display of selections to chips
Components.Selects.
Add input clear functionality, default icon is Material Icons clear
컨트롤에 색상을 지정
인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.
다크 테마를 적용
선택된 칩(chip)에 삭제(remove) 아이콘을 추가
리스트 항목의 최대 높이를 낮춤
인풋(input)을 비활성화
입력시 자동 문자 표시 비활성화
수동으로 인풋을 에러 상태로 만듬
Components.Selects.
인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.
Components.Selects.
인풋 타입을 전체-너비로 설정
컴포넌트의 높이를 설정
Components.Selects.
이미 선택된 셀렉트 메뉴 항목을 보여주지 않음
Components.Selects.
항목 의 아바타 값 속성을 설정
항목 의 비활성화(disabled) 값 속성을 설정
항목 의 텍스트 값 속성을 설정
항목 의 값 속성을 설정
오브젝트 배열이나 문자열 배열. 오브젝트를 사용하면 text 와 value 필드를 사용. 이는 item-text 와 item-value 를 사용해서 바꿀 수 있습니다.
Components.Selects.
라이트 테마를 적용
Components.Selects.
Apply a custom character mask to the input. See mask table above for more information
Components.Selects.
Components.Selects.
복수 선택이 가능하도록 변경. 값의 배열을 받음(?).
데이타가 없을때 보여줄 텍스트
clearable prop을 사용할때, 일단 한번 클리어되면 현재 상태에 따라 선택 메뉴가 열리거나 열려있게 됩니다. When using the clearable prop, once cleared
Components.Selects.
Components.Selects.
Components.Selects.
접두사(prefix) 표시
Components.Selects.
Components.Selects.
Components.Selects.
Returns the unmodified masked string
선택시 item-value 로 지정된 값이 아니라 오브젝트가 바로 반환되도록 바꿈.
Components.Selects.
True나 에러메시지 문자열을 반환하는 함수들의 배열
Label does not move on focus/dirty
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
Components.Selects.
접미사(suffix) 표시
인풋 타입을 설정
blur 이벤트까지 검증을 지연
표시여부를 조절 (Controls visibility)
Apply a custom value comparator function
보충
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
| Pre-made | |
| credit-card | #### - #### - #### - #### |
| date-with-time | ##/##/#### ##:## |
| phone | (###) ### - #### |
| social | ###-##-#### |
| time | ##:## |
| time-with-seconds | ##:##:## |
예제
라이트 테마 (Light theme)
표준 단일 셀렉트는 다양한 설정 옵션을 가지고 있습니다.
아이콘 (Icons)
앞이나 뒤에 커스텀 아이콘 붙이세요
복수선택 (Multiple)
multi-select 에서 선택된 항목들을 보여줄때 v-chip을 사용할 수 있습니다.
항목 텍스트와 값의 커스터마이즈 (Customized item text and value)
텍스트와 값 필드에 해당하는 항목 배열 내의 특정 속성을 지정할 수 있습니다. 기본값은 text 와 value 입니다. 이 예제에서는 선택된 아이템의 전체 오브젝트를 반환하는 return-opject prop을 사용합니다..
Prepend/Append item slots
The v-select components can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.
Change selection appearance
The selection scoped slot can be used to customize the way selected values are shown in the input. This is great when you want something like foo (+20 others) or don't want the selection to occupy multiple lines.