VstFilterRange

Компонент VsFilterRange призначений для вибору діапазону чогось у фільтрі. Включає два поля введення типу number для введення мінімального та максимального значення. Компонент дозволяє вказувати межі значень та може бути вимкнений у випадку, коли використовується інший фільтр або коли фільтр не застосовується.

Component API

Behaviour

Name	Description	Type
min	Мінімально допустиме значення. За замовчуванням - -9999999999	Number
max	Максимально допустиме значення. За замовчуванням - 9999999999	Number
step	Максимально допустимий крок. За замовчуванням - 1	Number
id	Обов'язковий унікальний ідентифікатор фільтру	String

State

Name	Description	Return value
disabled	Визначає, чи вибір діапазону вимкнено	Boolean

Events

Name	Description	Return value
@input	Викликається при зміні діапазону.	{ min: Number, max: Number }

Приклад

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

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

Details

export default {
  data() {
    return {
      filter: [
        {
          type: "range",
          label: "Range test",
          placeholder: "Placeholder test",
          id: "range",
          min: 100,
          max: 10000,
        },
      ],
    };
  },
};

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

  <template>
    <div>
      <code v-if="filterState" style="white-space: break-spaces;" class="mb-2 vsTailwind block">{{filterState}}</code>
      <VsFilter name="range" :scheme="filter" @change="filterState = $event"></VsFilter>
    </div>
  </template>
  <script>
    export default {
      data() {
        return {
          filterState: null,
          filter: [
            {
              type: "range",
              label: "Range test",
              placeholder: "Placeholder test",
              name: "Name test",
              id: "range",
              min: 100,
              max: 10000,
            },
          ],
        };
      },
    };
  </script>