表单自旋按钮

自旋按钮是 BootstrapVue 自定义数字范围表单控件。自旋按钮允许在最小值和最大值范围内，使用可选步长值增大或减小数字值。

BootstrapVue 自 v2.5.0 起提供

概述

组件 <b-form-spinbutton> 符合 WAI-ARIA，允许使用键盘控制，并支持水平（默认）和垂直布局。

与 range 类型输入类似，BootstrapVue 的 <b-form-spinbutton> 不允许 用户输入值。

<template>
  <div>
    <label for="demo-sb">Spin Button</label>
    <b-form-spinbutton id="demo-sb" v-model="value" min="1" max="100"></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-demo.vue -->

可以使用 向上箭头 和 向下箭头 键增大或减小值。

要通过原生浏览器表单提交，旋转按钮必须通过 name 属性设置一个名称。这将创建一个隐藏输入，其中包含旋转按钮的当前值。如果旋转按钮没有值，则隐藏输入的值将为空字符串。

`v-model` 值

v-model 始终将值返回为数字。如果没有设置初始值，则 v-model 可以为 null。

如果初始值为 null，则旋转按钮中不会显示任何值。使用 placeholder 属性在旋转按钮没有值时显示一个字符串（即 placeholder="--"）。

最小值、最大值和步长

旋转按钮的默认范围为 1 到 100，可以通过设置 min 和 max 属性来更改。默认步长增量为 1，可以通过 step 属性进行更改（允许小数）。

当设置 step 时，该值将始终是步长大小加上最小值的倍数。

<template>
  <div>
    <label for="sb-step">Spin button with step of 0.25</label>
    <b-form-spinbutton
      id="sb-step"
      v-model="value"
      min="0"
      max="10"
      step="0.25"
    ></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      }
    }
  }
</script>

<!-- b-form-spinbutton-step.vue -->

数字环绕

默认情况下，当值增加到 max 值时，按下增量按钮将不起作用。类似地，当值等于 min 值时，按下减量按钮将不起作用。

要允许旋转按钮在增量时从最大值环绕到最小值（或在减量时从最小值环绕到最大值），请将 wrap 属性设置为 true。

<template>
  <div>
    <label for="sb-wrap">Wrapping value spin button</label>
    <b-form-spinbutton id="sb-wrap" wrap min="1" max="25" placeholder="--"></b-form-spinbutton>
  </div>
</template>

<!-- b-form-spinbutton-wrap.vue -->

样式

大小

与其他表单控件一样，<b-form-spinbutton> 通过将 size 属性分别设置为 'sm' 或 'lg' 来支持小尺寸和大尺寸。

<template>
  <div>
    <label for="sb-small">Spin button - Small size</label>
    <b-form-spinbutton id="sb-small" size="sm" placeholder="--" class="mb-2"></b-form-spinbutton>

    <label for="sb-default">Spin button - Default size</label>
    <b-form-spinbutton id="sb-default" placeholder="--" class="mb-2"></b-form-spinbutton>

    <label for="sb-large">Spin button - Large size</label>
    <b-form-spinbutton id="sb-large" size="lg" placeholder="--" class="mb-2"></b-form-spinbutton>
  </div>
</template>

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

内联

<template>
  <div>
    <label for="sb-inline">Inline spin button</label>
    <b-form-spinbutton id="sb-inline" v-model="value" inline></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-inline.vue -->

旋转按钮会自动调整其宽度以适应显示的值。有关控制或设置宽度的详细信息，请参见下面的宽度部分。

垂直

旋转按钮可以以垂直模式定向

<template>
  <div>
    <label for="sb-vertical">Vertical spin button</label><br>
    <b-form-spinbutton id="sb-vertical" v-model="value" vertical></b-form-spinbutton>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-vertical.vue -->

垂直旋转按钮也可以使用 size 属性调整大小。在垂直模式下，旋转按钮被渲染为内联元素。

旋转按钮会自动调整其宽度以适应显示的值。有关控制或设置宽度的详细信息，请参见下面的宽度部分。

宽度

控件（当不是 vertical 或 inline 时）将扩展到父容器的最大宽度。您可以通过实用程序类（如 w-25、w-50、w-75）或使用样式来控制宽度设置宽度。

当设置 vertical 或 inline 时，控件将根据显示的值调整其宽度。你可以使用 css 样式来控制控件的整体宽度（即 style="width: 10rem;）。

数字格式化和区域设置

默认情况下，<b-form-spinbutton> 会以用户浏览器的默认区域设置格式化显示的数字。你可以通过 locale 属性指定区域设置（或区域设置数组）来更改本地化格式。数字格式本地化通过 Intl.NumberFormat 执行。可用的区域设置取决于浏览器实现。本地化仅控制向用户显示的值，不影响 v-model。

<template>
  <div>
    <label for="sb-locales">Locale</label>
    <b-form-select id="sb-locales" v-model="locale" :options="locales"></b-form-select>
    <label for="sb-local" class="mt-2">Spin button with locale</label>
    <b-form-spinbutton
      id="sb-locale"
      v-model="value"
      :locale="locale"
      min="0"
      max="10"
      step="0.125"
    ></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        locale: 'fr-CA',
        locales: [
          { value: 'en', text: 'English' },
          { value: 'de', text: 'German' },
          { value: 'fr-CA', text: 'French (Canadian)' },
          { value: 'fa', text: 'Persian' },
          { value: 'ar-EG', text: 'Arabic (Egyptian)' }
        ]
      }
    }
  }
</script>

<!-- b-form-spinbutton-locale.vue -->

或者，你可以提供自己的数字格式化函数来格式化显示的值。这对于显示文本而不是数字很有用，或者如果你想实现 Intl.NumberFormat 的不同功能。

要提供格式化函数，请将属性 formatter-fn 设置为方法引用。格式化程序传递一个参数，即当前值。请注意，格式化程序仅影响向用户显示的值，不影响 v-model。

<template>
  <div>
    <label for="sb-days" class="mt-2">Spin button with formatter</label>
    <b-form-spinbutton
      id="sb-days"
      v-model="value"
      :formatter-fn="dayFormatter"
      min="0"
      max="6"
      wrap
    ></b-form-spinbutton>
    <p>Value: {{ value }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
      }
    },
    methods: {
      dayFormatter(value) {
        return this.days[value]
      }
    }
  }
</script>

<!-- b-form-spinbutton-formatter.vue -->

禁用和只读状态

设置属性 disabled 会将组件置于禁用、非交互状态。属性 readonly 将组件置于只读状态（可聚焦，但用户无法更改值）。

<template>
  <b-row>
    <b-col md="6" class="mb-2">
      <label for="sb-disabled">Disabled spin button</label>
      <b-form-spinbutton id="sb-disabled" v-model="value" disabled></b-form-spinbutton>
    </b-col>
    <b-col md="6" class="mb-2">
      <label for="sb-readonly" class="">Readonly spin button</label>
      <b-form-spinbutton id="sb-readonly" v-model="value" readonly></b-form-spinbutton>
    </b-col>
  </b-row>
</template>

<script>
  export default {
    data() {
      return {
        value: 50
      }
    }
  }
</script>

<!-- b-form-spinbutton-disabled-readonly.vue -->

在浏览器原生表单提交期间，禁用的自旋按钮不会被提交，而只读自旋按钮将被提交（只要已通过 name 属性设置名称）。

验证状态

当你默认为 null 值，并且用户尚未选择值时，可以使用 state 属性将其中一种上下文验证样式应用于组件。

true 将有效的样式应用到组件
false 将无效的样式应用到组件
null 不应用任何上下文样式（默认）

必需的属性

请注意，必需的属性只在组件上生成 aria-required="true" 属性，并且不会对表单提交执行任何验证。您必须在应用程序逻辑中验证 v-model。

请注意，如果设置了属性 required，并且 v-model 为 null，则属性 aria-invalid="true" 将在组件上呈现。

事件

input 事件用于更新 v-model，并且在值发生任何更改时发出。

change 事件在用户松开鼠标按钮（按下增量或减量按钮时）或用户松开 ArrowDown 或 ArrowUp 键时发出。当您需要消除输入的抖动时，这会很方便。

以下示例说明了 input 和 change 事件之间的区别。单击并按住增量或减量按钮（或使用向上/向下箭头键）。

<template>
  <div>
    <label for="sb-input">Spin button - input and change events</label>
    <b-form-spinbutton
      id="sb-input"
      v-model="value1"
      @change="value2 = $event"
      wrap
    ></b-form-spinbutton>
    <p>Input event: {{ value1 }}</p>
    <p>Change event: {{ value2 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: 0,
        value2: null
      }
    }
  }
</script>

<!-- b-form-spinbutton-events.vue -->

辅助功能

当旋转按钮获得焦点时，可以使用以下键盘控件

Home 将值设置为 min 值
End 将值设置为 max 值
ArrowUp 将值增加步长量
ArrowDown 将值减少步长量
PageUp 将值增加步长量乘以 repeat-step-multiplier 量
PageDown 将值减少步长量乘以 repeat-step-multiplier 量

按住 ArrowUp、ArrowDown、PageUp 或 PageDown 键将自动重复增量或减量（经过一段初始延迟）。按住 ArrowUp 或 ArrowDown 键较长时间将使增量或减量金额乘以 repeat-step-multiplier 金额。

请注意，repeat-delay、repeat-threshold 和 repeat-interval 仅适用于 ArrowUp 或 ArrowDown 键。

实施说明

<b-form-spinbutton> 使用 Bootstrap v4 实用程序类（边框、对齐、flex）、表单控件和按钮类的混合，以及其他自定义 BootstrapVue SCSS/CSS。

另请参见

范围类型输入

组件参考

`<b-form-spinbutton>`

v2.5.0+

查看源代码

<b-form-spinbutton> 组件别名
<b-form-spinbutton> 属性
<b-form-spinbutton> v-model
<b-form-spinbutton> 插槽
<b-form-spinbutton> 事件

组件别名

<b-form-spinbutton> 还可以通过以下别名使用

<b-spinbutton>

注意：仅在导入所有 BootstrapVue 或使用组件组插件时才可以使用组件别名。

属性

所有属性默认值均可全局配置。

属性 (点击升序排列)	类型 (点击升序排列)	默认值	描述
`aria-controls`	`字符串`		如果此组件控制另一个组件或元素，请将其设置为受控组件或元素的 ID
`aria-label`	`字符串`		要放置在 spinbutton 的 `aria-label` 属性中的值
`disabled`	`布尔值`	`false`	将组件置于禁用状态
`form`	`字符串`		表单控件所属表单的 ID。在控件上设置 `form` 属性
`formatter-fn`	`函数`		对用于格式化显示值的函数的引用。它传递一个参数，即当前值
`id`	`字符串`		用于设置呈现内容的 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
`inline`	`布尔值`	`false`	设置后，将组件呈现为内联元素
`label-decrement`	`字符串`	`'Decrement'`	用于递减按钮的 `aria-label` 属性的文本
`label-increment`	`字符串`	`'Increment'`	用于递增按钮的 `aria-label` 属性的文本
`locale`	`数组` 或 `字符串`		指定用于格式化数字的区域设置。默认为浏览器区域设置。仅在使用内部格式化程序时适用
`max`	`数字` 或 `字符串`	`100`	可以选择的最大值。必须大于 `min` 属性。允许使用负数
`min`	`数字` 或 `字符串`	`1`	可以选择的最小值。允许使用负数
`name`	`字符串`		设置表单控件上 `name` 属性的值
`placeholder`	`字符串`		当 v-model 为 `null` 时显示的值
`readonly`	`布尔值`	`false`	将组件置于只读状态
`repeat-delay`	`数字` 或 `字符串`	`500`	在自动重复增量或减量发生之前以毫秒为单位的延迟。必须是正整数。要求用户单击/按住键盘
`repeat-interval`	`数字` 或 `字符串`	`100`	增量或减量重复之间的毫秒间隔。必须是正整数
`repeat-step-multiplier`	`数字` 或 `字符串`	`4`	达到 `repeat-threshold` 后跳过的步数。必须是正整数。此值也用于向上和向下翻页键
`repeat-threshold`	`数字` 或 `字符串`	`10`	在通过 `repeat-step-multiplier` 增加步长大小之前重复出现的次数。必须为正整数
`size`	`字符串`		设置组件外观的大小。'sm'、'md'（默认）或 'lg'
`state`	`布尔值`	`null`	控制组件的验证状态外观。`true` 表示有效，`false` 表示无效，`null` 表示无验证状态
`step`	`数字` 或 `字符串`	`1`	指定值必须遵守的粒度的正数
`value` v-model	`布尔值` 或 `数字`		旋钮的值。绑定到 v-model
`vertical`	`布尔值`	`false`	设置后，使用垂直布局渲染组件
`wrap`	`布尔值`	`false`	设置后，允许值在达到最小值或最大值时环绕

`v-model`

属性	事件
`value`	`input`

插槽

名称	作用域	描述
`decrement` v2.8.0+		放置在递减按钮中的自定义内容
`increment` v2.8.0+		放置在递增按钮中的自定义内容

事件

事件	参数	描述
`change`	`value` - 旋钮的当前值	当用户释放鼠标按钮或按键时触发
`input`	`value` - 旋钮的当前值	在每次值更改时触发，以更新 v-model

导入单个组件

您可以通过以下命名导出将各个组件导入到您的项目中

组件	命名导出	导入路径
`<b-form-spinbutton>`	`BFormSpinbutton`	`bootstrap-vue`

示例

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

作为 Vue.js 插件导入

此插件包含上面列出的所有各个组件。插件还包括任何组件别名。

命名导出	导入路径
`FormSpinbuttonPlugin`	`bootstrap-vue`

示例

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

概述

v-model 值