VstFilterSelect

Компонент vst-form-select є кастомізованим випадаючим списком, призначеним для вибору значень з розгорнутого списку. Компонент має підтримку як вибору одного значення, так і множинного вибору.

Component API

Style

Name	Description	Type
size	Розмір селекту (mini, small, large)	String

Content

Name	Description	Type
placeholder	Декоративний текст-підсказка	String
icon	Іконка поруч зі стрілкою	String
options	Опції для меню можна передавати як через слоти, так і через цей пропс. Якщо цей пропс буже вказаний, то слоти будуть ігноруватися. Опції для меню можна передавати як через слоти, так і через цей пропс. Якщо цей пропс буже вказаний, то слоти будуть ігноруватися. Масив об'єктів з label та value за замовчуванням. Щоб змінити дефолтні поля, потрібно визначити пропси valueProperty(value options, що піде у v-model) та labelProperty(візуальне відображення опцій). Якщо потрібно визначити не окрему властивість, як v-model, а цілий об'єкт, то потрібно передати у value значення wholeObj	String
multiple	Можливість мультиселекту. По дефолту false. Йде разом з пропсом options	Boolean

State

Name	Description	Type
clearable	Кнопка очищення значення інпуту	Boolean
disabled	Атрибут відключення інпуту	Boolean

Events

Name	Description	Return value
@click	Реалізуе клік по компоненту	Event
@change	Івент зміни значення компонента	any
@focus	Івент фокусу на компоненті	Event
@blur	Івент виходу з фокуса на компоненті	Event

Приклад

  <template>
    <div class="flex gap-2">
        <VsFormSelect v-model="selectValue" :options="selectOptions"></VsFormSelect>
        Обране значення: {{selectValue}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
            selectValue: null,    
            selectOptions: [
                { "label": "Option1", "value": "Option1" },
                { "label": "Option2", "value": "Option2" },
                { "label": "Option3", "value": "Option3" },
                { "label": "Option4", "value": "Option4" }
            ]
        };
      },
    };
  </script>
  

Вимкнення селекту

Атрибут disabled визначає, чи селект вимкнений. Використовуйте атрибут disabled, щоб визначити, чи селект вимкнена. Він приймає логічне значення.

  <template>
    <div class="flex gap-2">
        <VsFormSelect v-model="selectValue" :options="selectOptions" disabled></VsFormSelect>
        Обране значення: {{selectValue}}
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
            selectValue: null,    
            selectOptions: [
                { "label": "Option1", "value": "Option1" },
                { "label": "Option2", "value": "Option2" },
                { "label": "Option3", "value": "Option3" },
                { "label": "Option4", "value": "Option4" }
            ]
        };
      },
    };
  </script>