VstFilterText

Компонент використовується для захоплення введеного користувачем тексту. Він використовує v-model, подібний до звичайного введення.

Component API

Behaviour

Name	Description	Type
value	Значення введеного/заданого тексту.	String
id	Обов'язковий унікальний ідентифікатор фільтру	String

State

Name	Description	Type
clearable	Очищення інпуту. За замовчуванням true	Boolean

Content

Name	Description	Type
placeholder	Декоративний текст-підсказка	String

Events

Name	Description	Return value
@input	Івент зміни значення компонента	String
@focus	Івент фокусу на компоненті	Event
@blur	Івент виходу з фокуса на компоненті	Event
@keyup	Івент виходу з фокуса на компоненті	Event

Приклади

Нижче наведено базове використання компоненти, де задано пропси id, placeholder. label - назва випадаючого акордеону, type - ключ, який визначає, який фільтр виводити.

Приклад пропсу scheme

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "text",
          label: "Search products",
          placeholder: "Placeholder test",
          id: "search",
        },
      ],
    };
  },
};

Приклад компоненту

    <template>
      <div>
          <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
          <VsFilter name="text" :scheme="filter" @change="filterState = $event"></VsFilter>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            filterState: null,
            filter: [
              {
                isOpen: true,
                type: "text",
                label: "Search products",
                placeholder: "Placeholder test",
                id: "search",
              },
            ],
          };
        },
      };
    </script>