Меню выбора формы

Пользовательский Bootstrap элемент <select> с использованием пользовательских стилей. При необходимости укажите параметры на основе массива, массива объектов или объекта.

Сгенерируйте ваши опции выбора, передав массив или объект в свойства options:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите опцию' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция' },
          { value: { C: '3PO' }, text: 'Эта опция со значением объекта' },
          { value: 'd', text: 'Эта одна отключена', disabled: true }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options.vue -->

Вы даже можете определить группы опций с помощью свойства options:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите опцию' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция', disabled: true },
          {
            label: 'Сгруппированные опции',
            options: [
              { value: { C: '3PO' }, text: 'Опция со значением объекта' },
              { value: { R: '2D2' }, text: 'Другая опция со значением объекта' }
            ]
          }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options.vue -->

Или укажите свои параметры и группы параметров вручную:

<template>
  <div>
    <b-form-select v-model="selected" class="mb-3">
      <b-form-select-option :value="null">Пожалуйста, выберите опцию</b-form-select-option>
      <b-form-select-option value="a">Опция A</b-form-select-option>
      <b-form-select-option value="b" disabled>Опция B (отключена)</b-form-select-option>
      <b-form-select-option-group label="Сгруппированные опции">
        <b-form-select-option :value="{ C: '3PO' }">Опция со значением объекта</b-form-select-option>
        <b-form-select-option :value="{ R: '2D2' }">Другая опция со значением объекта</b-form-select-option>
      </b-form-select-option-group>
    </b-form-select>

    <div class="mt-2">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null
      }
    }
  }
</script>

<!-- b-form-select-manual.vue -->

Не стесняйтесь смешивать опцию options с <b-form-select-option> и <b-form-select-option-group>. Параметры и группы параметров, размещенные вручную, появятся под параметрами, созданными с помощью свойства options. Чтобы разместить ручные опции и группы опций выше опций, заданных опцией options, используйте именованный слот first.

<template>
  <div>
    <b-form-select v-model="selected" :options="options" class="mb-3">
      <!-- Этот слот появляется над опциями из свойства 'options' -->
      <template #first>
        <b-form-select-option :value="null" disabled>-- Пожалуйста, выберите опцию --</b-form-select-option>
      </template>

      <!-- Эти параметры появятся после параметров из свойства 'options' -->
      <b-form-select-option value="C">Опция C</b-form-select-option>
      <b-form-select-option value="D">Опция D</b-form-select-option>
    </b-form-select>

    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 'A', text: 'Опция A (из свойства опций)' },
          { value: 'B', text: 'Опция B (из свойства опций)' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-both.vue -->

Свойство Options

options может быть массивом строк или объектов или объектом значения ключа. Доступные поля:

  • value Выбранное значение, которое будет установлено на v-model
  • disabled Отключает элемент для выбора
  • text Отображать текст или html Отображать базовый инлайновый html

value может быть строкой, числом или простым объектом. Избегайте использования сложных типов в значениях.

Если указаны и html, и text, приоритет будет иметь html. В поле html поддерживается только базовый / собственный HTML (компоненты работать не будут). Обратите внимание, что не все браузеры будут отображать встроенный html (т.е. <i>, <strong> и т. д.). Внутри элементов <option> элемента <select>.

Будьте осторожны при размещении пользовательского контента в поле html, поскольку это может сделать вас уязвимыми для XSS-атаки, если вы сначала не очистите строку, введенную пользователем.

Опции как массив

const options = ['A', 'B', 'C', { text: 'D', value: { d: 1 }, disabled: true }, 'E', 'F']

Если запись массива является строкой, она будет использоваться как для сгенерированных полей value и text.

Вы можете смешивать, используя строки и объекты в массиве.

Внутри BootstrapVue преобразует указанный выше массив в следующий формат (формат массив объектов):

const options = [
  { text: 'A', value: 'A', disabled: false },
  { text: 'B', value: 'B', disabled: false },
  { text: 'C', value: 'C', disabled: false },
  { text: 'D', value: { d: 1 }, disabled: true },
  { text: 'E', value: 'E', disabled: false },
  { text: 'F', value: 'F', disabled: false }
]

Параметры как массив объектов

const options = [
  { text: 'Элемент 1', value: 'first' },
  { text: 'Элемент 2', value: 'second' },
  { html: '<b>Элемент</b> 3', value: 'third', disabled: true },
  { text: 'Элемент 4' },
  { text: 'Элемент 5', value: { foo: 'bar', baz: true } }
]

Если value отсутствует, то text будет использоваться как поля value и text. Если вы используете свойство html, вы должны предоставить свойство value.

Новое в версии 2.2.0 Чтобы определить группы опций, просто добавьте объект со свойством label в качестве имени группы и свойством options с массивом опций группы.

const options = [
  { text: 'Элемент 1', value: 'first' },
  { text: 'Элемент 2', value: 'second' },
  {
    label: 'Сгруппированные опции',
    options: [{ html: '<b>Элемент</b> 3', value: 'third', disabled: true }, { text: 'Элемент 4' }]
  },
  { text: 'Элемент 5', value: { foo: 'bar', baz: true } }
]

Опции как объект

Устарело

Ключи отображаются в value, а значения отображаются в параметр text.

const options = {
  a: 'Элемент A',
  b: 'Элемент B',
  c: { html: 'Элемент C', disabled: true },
  d: { text: 'Элемент D', value: 'overridden_value' },
  e: { text: 'Элемент E', value: { foo: 'bar', baz: true } }
}

Внутри BootstrapVue преобразует указанный выше объект в следующий формат (формат массив объектов):

const options = [
  { text: 'Элемент A', value: 'a', disabled: false },
  { text: 'Элемент B', value: 'b', disabled: false },
  { html: 'Элемент C', value: 'c', disabled: false },
  { text: 'Элемент D', value: 'overridden_value', disabled: true },
  { text: 'Элемент E', value: { foo: 'bar', baz: true }, disabled: false }
]

Примечание: При использовании формата объекта порядок окончательного массива не гарантирован. По этой причине рекомендуется использовать любой из ранее упомянутых форматов массивов.

Изменение названий полей опций

Если вы хотите настроить имена свойств поля (например, используя поле name для отображения text), вы можете легко изменить их, установив text-field, html-field, value-field и disabled-field прописывает строку, содержащую имя свойства, которое вы хотите использовать:

<template>
  <div>
    <b-form-select
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></b-form-select>

    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: 'A',
        options: [
          { item: 'A', name: 'Опция A' },
          { item: 'B', name: 'Опция B' },
          { item: 'D', name: 'Опция C', notEnabled: true },
          { item: { d: 1 }, name: 'Опция D' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-options-fields.vue -->

Примечания опции

Если начальное значение вашего выражения v-model не соответствует ни одному из параметров, компонент <b-form-select> (который является встроенным в HTML5 <select>) будет отображаться в не выбранное состояние. В iOS это приведет к тому, что пользователь не сможет выбрать первый элемент, потому что iOS в этом случае не запускает событие изменения. Поэтому рекомендуется в качестве первого варианта указать отключенный параметр с пустым значением.

<b-form-select v-model="selected" :options="options">
  <template #first>
    <b-form-select-option value="" disabled>-- Пожалуйста, выберите опцию --</b-form-select-option>
  </template>
</b-form-select>

Дополнительную информацию смотрите в документации Vue select.

Стандартный (одиночный) выбор

По умолчанию применяется настраиваемый стиль выбора Bootstrap v4.

Значение в одиночном режиме

В режиме, отличном от multiple, <b-form-select> возвращает единственное value текущей выбранной опции.

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите какой-нибудь элемент' },
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция по умолчанию' },
          { value: 'c', text: 'Это другая опция' },
          { value: 'd', text: 'Эта одна отключена', disabled: true }
        ]
      }
    }
  }
</script>

<!-- b-form-select-single.vue -->

Размеры селекта (отображаемые строки)

Вы можете использовать свойство select-size, чтобы переключить пользовательский выбор в список выбора, а не в раскрывающийся список. Установите для свойства select-size числовое значение больше 1, чтобы контролировать количество видимых строк параметров.

Обратите внимание, когда для параметра select-size установлено значение больше 1, пользовательский стиль Bootstrap v4 не будет применяться, если также не установлено свойство multiple.

Обратите внимание, что не все мобильные браузеры отображают выбор в виде списка.

<template>
  <div>
    <b-form-select v-model="selected" :options="options" :select-size="4"></b-form-select>
    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Пожалуйста, выберите какой-нибудь элемент' },
          { value: 'a', text: 'Это Опция a' },
          { value: 'b', text: 'Выбранная опция b по умолчанию' },
          { value: 'c', text: 'Это Опция c' },
          { value: 'd', text: 'Эта одна отключена', disabled: true },
          { value: 'e', text: 'Это Опция e' },
          { value: 'e', text: 'Это Опция f' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-size.vue -->

Поддержка множественного выбора

Включите режим множественного выбора, установив свойство multiple, и управляйте количеством строк, отображаемых в списке множественного выбора, установив select-size равным количеству отображаемых строк. По умолчанию браузер использует значение по умолчанию (обычно 4).

Значение в режиме множественного выбора

В режиме multiple, <b-form-select> всегда возвращает массив значений параметров. Вы должны предоставить ссылку на массив в качестве v-model в режиме multiple.

<template>
  <div>
    <b-form-select v-model="selected" :options="options" multiple :select-size="4"></b-form-select>
    <div class="mt-3">Выбрано: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ['b'], // Array reference
        options: [
          { value: 'a', text: 'Это первая опция' },
          { value: 'b', text: 'Выбранная опция по умочланию' },
          { value: 'c', text: 'Это другая опция' },
          { value: 'd', text: 'Эта одна отключена', disabled: true },
          { value: 'e', text: 'Это опция e' },
          { value: 'f', text: 'Это опция f' },
          { value: 'g', text: 'Это опция g' }
        ]
      }
    }
  }
</script>

<!-- b-form-select-multiple-mode.vue -->

Размер контролов

Установите размер текста элемента управления формой, используя свойство size равное sm или lg для малых или больших соответственно.

По умолчанию <b-form-select> будет занимать всю ширину контейнера, в котором он появляется. Чтобы контролировать ширину выбора, поместите ввод внутри стандартного столбца сетки Bootstrap.

Автофокус

Когда свойство autofocus установлено на <b-form-select>, выделение будет автоматически сфокусировано, когда оно вставлено (т.е. mounted) в документ или повторно активировано, когда оно находится внутри компонента Vue <keep-alive>. Обратите внимание, что эта опция не устанавливает атрибут autofocus для выбора и не может сказать, когда выбор становится видимым.

Контекстные состояния

Bootstrap включает стили проверки valid и invalid состояний для большинства элементов управления формой.

Вообще говоря, вы захотите использовать определенное состояние для определенных типов обратной связи:

  • false (обозначает недопустимое состояние) отлично подходит, когда есть блокирующее или обязательное поле. Пользователь должен правильно заполнить это поле, чтобы отправить форму.
  • true (обозначает допустимое состояние) идеально подходит для ситуаций, когда у вас есть проверка по каждому полю во всей форме и вы хотите побудить пользователя пройти через остальные поля.
  • null Не отображает состояние проверки (ни действительное, ни недействительное)

Чтобы применить один из значков контекстного состояния к <b-form-select>, установите для свойства state значение false (для недопустимого), true (для действительного) или null (состояние проверки отсутствует).

Передача состояния контекстной проверки вспомогательным технологиям и пользователям с дальтонизмом

Использование этих контекстных состояний для обозначения состояния элемента управления формы обеспечивает только визуальную цветовую индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана, или пользователям с дальтонизмом.

Убедитесь, что также имеется альтернативная индикация состояния. Например, вы можете включить подсказку о состоянии в самом тексте элемента управления формы <label> или предоставив дополнительный блок текста справки (через <b-form-group> или <b-form-*-feedback>). В частности, для вспомогательных технологий недопустимым элементам управления формой также может быть назначен атрибут aria-invalid="true" (смотрите ниже).

Атрибут ARIA aria-invalid

Когда <b-form-select> имеет недопустимое контекстное состояние (например, state = false), вы также можете установить для <b-form-select> свойства aria-invalid значение true.

Поддерживаемые invalid значения:

  • false (по умолчанию) Ошибок не обнаружено
  • true Значение не прошло проверку

Когда для параметра state установлено значение false, для параметра aria-invalid также будет установлено значение true.

Не кастомный селект

Задайте для свойства plain свойство рендеринга <select> в собственном браузере (хотя класс .form-control всегда будет помещен в выделение).

plain выбор всегда будет отображаться для не multiple селектов, для которых свойство select-size установлено на значение больше 1.

Справочник по компонентам

<b-form-select>

Псевдонимы компонентов

<b-form-select> также может использоваться через следующие псевдонимы:

  • <b-select>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
(Click to sort ascending)
Тип
(Click to sort ascending)
По умолчанию
Описание
aria-invalid
Boolean или StringfalseНеобязательное значение для атрибута 'aria-invalid'. Поддерживаемые значения: 'true' и 'false'. Если не установлен, свойство 'state' будет определять значение
autofocus
BooleanfalseЕсли установлено значение `true`, пытается автоматически сфокусировать элемент управления, когда он установлен, или повторно активировать, когда находится в состоянии активности. Не устанавливает атрибут `autofocus` на элементе управления
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
disabled-field
String'disabled'Имя поля в массиве `options`, которое следует использовать для отключенного состояния
form
StringИдентификатор формы, к которой принадлежит элемент управления формой. Устанавливает атрибут `form` в элементе управления
html-field
Использовать с осторожностью
String'html'Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
id
StringИспользуется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
label-field
String'label'Ключ, который нужно использовать из объекта option для получения метки
multiple
BooleanfalseКогда установлено, позволяет выбрать несколько опций (множественный выбор)
name
StringУстанавливает значение атрибута `name` в элементе управления формы
options
Array или Object[]Массив элементов для визуализации в компоненте
options-field
String'options'Ключ, который нужно использовать из объекта option для получения опций
plain
BooleanfalseВизуализируйте элемент управления формы в обычном режиме, а не в режиме пользовательского стиля
required
BooleanfalseДобавляет атрибут `required` в элемент управления формы
select-size
Number0Если установлено значение больше 0, будет установлено количество строк параметров отображения. Обратите внимание, что не все браузеры будут учитывать этот параметр
size
StringУстановите размер внешнего вида компонента. 'sm', 'md' (по умолчанию) или 'lg'
state
BooleannullУправляет внешним видом состояния проверки компонента. `true` для действительного, `false` для недопустимого или `null` для отсутствия проверки состояния
text-field
String'text'Имя поля в массиве `options`, которое следует использовать для текстовой метки
value
v-model
AnyТекущее значение выбора. Должен быть установлен в массив, если задано свойство 'multiple'
value-field
String'value'Имя поля в массиве `options`, которое следует использовать для значения

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

v-model

Свойство
Событие
valueinput

Слоты

Наименование
Описание
default Контент для размещения в форме выберите
first Слот для размещения опций или групп опций над опциями, предоставленными через свойство 'options'

События

Событие
Аргументы
Описание
change
  1. value - Текущее выбранное значение(я) выбранного
Генерируется, когда значение выбора изменяется в результате взаимодействия с пользователем
input
  1. value - Текущее выбранное значение(я) выбранного
Emitted when the select value changes

Псевдонимы компонентов

<b-form-select-option> также может использоваться через следующие псевдонимы:

  • <b-select-option>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
disabled
BooleanfalseЕсли установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
value
Обязательный
AnyЗначение опции

Слоты

Наименование
Описание
default Контент для размещения в форме выберите вариант

<b-form-select-option-group>

v2.2.0+

Псевдонимы компонентов

<b-form-select-option-group> также может использоваться через следующие псевдонимы:

  • <b-select-option-group>

Примечание: Псевдонимы компонентов доступны только при импорте всего BootstrapVue или при использовании подключаемого модуля группы компонентов.

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство
Тип
По умолчанию
Описание
disabled-field
String'disabled'Имя поля в массиве `options`, которое следует использовать для отключенного состояния
html-field
Использовать с осторожностью
String'html'Имя поля в массиве `options`, которое следует использовать для html-метки вместо текстового поля
label
Обязательный
StringЯрлык для группы опций
options
Array или Object[]Массив элементов для визуализации в компоненте
text-field
String'text'Имя поля в массиве `options`, которое следует использовать для текстовой метки
value-field
String'value'Имя поля в массиве `options`, которое следует использовать для значения

Осторожно: Свойства, поддерживающие HTML-строки (*-html) может быть уязвим для Атаки межсайтового скриптинга (XSS) при передаче необработанных значений, предоставленных пользователем. Вы должны правильно очищать ввод пользователя!

Слоты

Наименование
Описание
default Контент для размещения в форме выберите группу опций
first Слот для размещения опций над опциями, предоставленными через свойство 'options'

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент
Именованный экспорт
Путь импорта
<b-form-select>BFormSelectbootstrap-vue
<b-form-select-option>BFormSelectOptionbootstrap-vue
<b-form-select-option-group>BFormSelectOptionGroupbootstrap-vue

Пример:

import { BFormSelect } from 'bootstrap-vue'
Vue.component('b-form-select', BFormSelect)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты. Плагины также включают псевдонимы любых компонентов.

Именованный экспорт
Путь импорта
FormSelectPluginbootstrap-vue

Пример:

import { FormSelectPlugin } from 'bootstrap-vue'
Vue.use(FormSelectPlugin)