报告问题编辑此页面

表单评级

BootstrapVue 的自定义星级评级组件 <b-form-rating>，用于输入或显示评级值。该组件完全符合 WAI-ARIA 标准，并支持键盘控制。

自 v2.12.0 起在 BootstrapVue 中提供

概述

评级值范围从 1 到允许的星级数（默认星级为 5，最小星级为 3）。由于 <b-form-rating> 使用 Bootstrap 类 form-control，因此可以轻松将其放置在 输入组 中。

对于 <b-form-rating> 有两种主要模式：交互式和只读。

交互模式允许用户从 1 到星形数（默认 5）中选择一个评分，以整数为增量。

交互评分（输入模式）

<template>
  <div>
    <b-form-rating v-model="value"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating.vue -->

只读模式用于显示聚合评分，并支持 half 星形。

只读（非交互式）评分

<template>
  <div>
    <b-form-rating v-model="value" readonly></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-non-interactive.vue -->

样式

变体和颜色

通过 variant 属性轻松将 Bootstrap 主题颜色变体应用到评分图标。默认情况下，使用默认表单控件文本颜色。

<template>
  <div>
    <b-form-rating v-model="value" variant="warning" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="success" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="danger" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="primary" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" variant="info" class="mb-2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-variant.vue -->

要应用自定义颜色，请使用 color 属性，该属性接受标准 CSS 颜色名称、HEX 颜色值 (#...) 或 RGB/RGBA (rgb(...)/rgba(...)) 颜色值

<template>
  <div>
    <b-form-rating v-model="value" color="indigo" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="#ff00ff" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="rgb(64, 192, 128)" class="mb-2"></b-form-rating>
    <b-form-rating v-model="value" color="rgba(64, 192, 128, 0.75)" class="mb-2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-color.vue -->

注释

  • 属性 color 优先于 variant 属性
  • 变体转换为图标上的 text-{variant} 实用程序类

星形数

默认情况下，<b-form-rating> 的默认值为 5 星形。您可以通过 stars 属性更改星形数。允许的最小星形数为 3。

<template>
  <div>
    <label for="rating-10">Rating with 10 stars:</label>
    <b-form-rating id="rating-10" v-model="value10" stars="10"></b-form-rating>
    <p class="mt-2">Value: {{ value10 }}</p>

    <label for="rating-7">Rating with 7 stars:</label>
    <b-form-rating id="rating-7" v-model="value7" stars="7"></b-form-rating>
    <p class="mt-2">Value: {{ value7 }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value10: null,
        value7: null,
      }
    }
  }
</script>

<!-- b-form-rating-stars.vue -->

显示值

默认情况下，<b-form-rating> 不显示当前数字值。要显示当前值，只需将 show-value 属性设置为 true。要控制精度（小数点后的位数），只需将 precision 属性设置为要显示的小数点后位数。在 readonly 模式下显示聚合或平均评分值时，precision 设置非常有用。

<template>
  <div>
    <b-form-rating v-model="value" show-value></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value.vue -->

设置精度

<template>
  <div>
    <b-form-rating v-model="value" readonly show-value precision="2"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value-precision.vue -->

显示最大值

2.13.0+

还可以通过将属性 show-value-max 设置为 true 来选择性地显示可能的最大评分

<template>
  <div>
    <b-form-rating
      v-model="value"
      readonly
      show-value
      show-value-max
      precision="2"
    ></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-value-max.vue -->

控制大小

想要一个较小或较大的评分控件吗？只需将属性 size 分别设置为 'sm' 或 'lg'。

<template>
  <div>
    <label for="rating-sm">Small rating</label>
    <b-form-rating id="rating-sm" v-model="value" size="sm"></b-form-rating>

    <label for="rating-md" class="mt-3">Default rating (medium)</label>
    <b-form-rating id="rating-md" v-model="value"></b-form-rating>

    <label for="rating-lg" class="mt-3">Large rating</label>
    <b-form-rating id="rating-lg" v-model="value" size="lg"></b-form-rating>

    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

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

内联模式

默认情况下，<b-form-rating> 占据父容器的 100% 宽度。在某些情况下，您可能希望自定义输入占据其内容所需的空间。只需将 inline 属性设置为 true，即可在内联模式下呈现组件

<template>
  <div>
    <label for="rating-inline">Inline rating:</label>
    <b-form-rating id="rating-inline" inline value="4"></b-form-rating>
  </div>
</template>

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

无边框

默认情况下，<b-form-rating> 具有标准的 Bootstrap 表单控件样式。要禁用默认的表单控件边框，只需将 no-border 属性设置为 true。

<template>
  <div>
    <label for="rating-sm-no-border">Small rating with no border</label>
    <b-form-rating id="rating-sm-no-border" v-model="value" no-border size="sm"></b-form-rating>

    <label for="rating-md-no-border" class="mt-3">Default rating (medium) with no border</label>
    <b-form-rating id="rating-md-no-border" v-model="value" no-border></b-form-rating>

    <label for="rating-lg-no-border" class="mt-3">Large rating with no border</label>
    <b-form-rating id="rating-lg-no-border" v-model="value" no-border size="lg"></b-form-rating>

    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-no-border.vue -->

注释

  • 出于可访问性原因，无论 no-border 设置如何，当评分组件获得焦点时，都会显示一个焦点环。

禁用

如果您需要在用户可以选择评级值之前提供其他信息，只需将 disabled 属性设置为 true，即可禁用组件上的任何用户交互

<template>
  <div>
    <label for="rating-disabled">Disabled rating</label>
    <b-form-rating id="rating-disabled" value="2.75" disabled></b-form-rating>
  </div>
</template>

<!-- b-form-rating-disabled.vue -->

只读

只读评级仍然可以获得焦点，但没有交互性。此状态对于显示汇总或平均评级值非常有用。允许小数，当 value 不是整数时，将显示半图标（半图标阈值为 0.5）。

<template>
  <div>
    <label for="rating-readonly">Readonly rating</label>
    <b-form-rating
      id="rating-readonly"
      value="3.6536"
      readonly
      show-value
      precision="3"
    ></b-form-rating>
  </div>
</template>

<!-- b-form-rating-readonly.vue -->

清除按钮

可以通过 show-clear 属性选择性地显示一个清除图标。当单击清除图标时，值将设置为 null。

<template>
  <div>
    <b-form-rating v-model="value" show-clear show-value></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-clear.vue -->

注释

  • 当设置属性 readonly 或 disabled 时，不会 显示清除图标。

图标

默认情况下，<b-form-rating> 使用 Bootstrap 图标 图标 'star'、'star-half'、'star-fill' 以及图标 'x'（用于可选的清除按钮）。您可以通过 icon-empty、icon-half、icon-full 和 icon-clear 属性指定要使用的备用 Bootstrap 图标。这些属性接受 Bootstrap 图标 kebab-case 名称，并要求在本地或全局注册/安装相应的图标组件。

<template>
  <div>
    <b-form-rating
      icon-empty="heart"
      icon-half="heart-half"
      icon-full="heart-fill"
      icon-clear="slash-circle"
      show-clear
      variant="danger"
    ></b-form-rating>
  </div>
</template>

<!-- b-form-rating-icons.vue -->

或者，您可以通过 'icon-empty'、'icon-half'、'icon-full' 和 'icon-clear' 作用域插槽提供您自己的内容。

表单提交

如果您打算通过标准表单提交提交评级值，请将 name 属性设置为所需的表单字段名称。将生成一个隐藏输入，其值为当前值（如果没有值，则为空字符串）。

在输入组中使用

以下是在输入组中放置 <b-form-rating> 的示例

<template>
  <div>
    <b-input-group>
      <b-input-group-prepend>
        <b-button @click="value = null">Clear</b-button>
      </b-input-group-prepend>
      <b-form-rating v-model="value" color="#ff8800"></b-form-rating>
      <b-input-group-append>
        <b-input-group-text class="justify-content-center" style="min-width: 3em;">
          {{ value }}
        </b-input-group-text>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

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

<!-- b-form-rating-input-group.vue -->

国际化

当指定 locale 时，显示的值（当 show-value 属性为 true 时）将采用浏览器的默认语言环境。要更改语言环境，只需将 locale 属性设置为首选语言环境或首选语言环境数组（首选语言环境优先）。这将影响可选的显示值以及组件的从左到右或从右到左的方向。

<template>
  <div>
    <b-form-select v-model="locale" :options="locales" class="mb-2"></b-form-select>
    <b-form-rating v-model="value" :locale="locale" show-value precision="1"></b-form-rating>
    <p class="mt-2">Value: {{ value }}</p>
  </div>
</template>

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

<!-- b-form-rating-i18n.vue -->

实现说明

评级控件使用 Bootstrap v4 form-control*、d-*（显示）、border-* 和 text-{variant} 类，以及 BootstrapVue 的自定义 CSS 以实现适当的样式。

控件的根元素是 <output> 元素，它允许 <label> 元素与其关联。

辅助功能

对于屏幕阅读器用户，<b-form-rating> 显示为滑块类型输入。

使用键盘导航选择评级值，并模拟 range 输入的键盘控件

  • 左 或 下 将使评级值减 1
  • 右 或 上 将使评级值增 1
  • 当 locale 解析为从右到左的语言时，左 和 右 行为会颠倒。

组件参考

<b-form-rating>

v2.12.0+
查看源代码

组件别名

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

  • <b-rating>

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

属性

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

属性
(单击按升序排序)
类型
(单击按升序排序)
默认值
描述
color
字符串用于代替变体的 CSS 颜色。接受 HEX 或 RGB/RGBA 字符串
disabled
布尔值false设为 `true` 时，禁用组件的功能并将其置于禁用状态
form
字符串表单控件所属的表单 ID。在控件上设置 `form` 属性
icon-clear
字符串'x'用于清除按钮的 Bootstrap 图标名称。请注意，图标必须在组件中或全局注册
icon-empty
字符串'star'用于空图标的 Bootstrap 图标名称。请注意，图标必须在组件中或全局注册
icon-full
字符串'star-fill'用于完整图标的 Bootstrap 图标名称。请注意，图标必须在组件中或全局注册
icon-half
字符串'star-half'用于半图标的 Bootstrap 图标名称。请注意，图标必须在组件中或全局注册
id
字符串用于在呈现的内容上设置 `id` 属性，并用作根据需要生成任何其他元素 ID 的基础
inline
布尔值false当 `true` 呈现为内联元素，而不是块 (100% 宽度) 元素
locale
数组 或 字符串在设置 prop `show-value` 时显示值时要使用的语言环境（或语言环境）。默认为浏览器的默认语言环境
name
字符串设置表单控件上 `name` 属性的值
no-border
布尔值false当为 `true` 时禁用默认边框
精度
Number 或 String指定小数点后要显示的位数。默认为未定义精度
只读
布尔值false当为 `true` 时使评级为只读。当为 `true` 时，允许分数评级值（将显示半图标）
显示清除
布尔值false当为 `true` 时显示清除值图标按钮
显示值
布尔值false当为 `true` 时在控件中显示当前评级值
显示值最大值
v2.13.0+ 		布尔值false当设置为 `true` 且属性 `show-value` 为 `true` 时，在格式化值中包括可能的最大星级评级
大小
字符串设置组件外观的大小。'sm'、'md'（默认）或 'lg'
星星
Number 或 String5要显示的星星数。最小值为 `3`，默认值为 `5`
值
v-model 		Number 或 String评级值。这是 v-model
变体
字符串将 Bootstrap 主题颜色变体之一应用于组件

v-model

属性
事件
值更改

插槽

名称
范围
描述
icon-clear 否可选清除按钮的内容
icon-empty 空图标的内容
icon-full 完整图标的内容
icon-half 半图标的内容

事件

事件
参数
描述
更改
  1. value - 当前评级值
发出以更新 v-model

导入单个组件

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

组件
命名导出
导入路径
<b-form-rating>BFormRatingbootstrap-vue

示例

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

作为 Vue.js 插件导入

此插件包括上述所有列出的单个组件。插件还包括任何组件别名。

命名导出
导入路径
FormRatingPluginbootstrap-vue

示例

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