回報問題編輯此頁面

表單評級

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 -->

唯讀模式用於顯示總合評分，並支援 半 顆星。

唯讀（非互動式）評分

<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 色彩名稱、十六進位色彩值 (#...) 或 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-{變異} 實用程式類別。

星號數量

預設情況下，<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 Icons 圖示 'star'、'star-half'、'star-fill'，以及圖示 'x'（用於選用清除按鈕）。您可以透過 icon-empty、icon-half、icon-full，以及 icon-clear 屬性來指定要使用的替代 Bootstrap Icons。這些屬性接受 Bootstrap Icon 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
陣列 或 字串如果設為 `show-value` 屬性時，會顯示值時使用的語言環境 (或語言環境)。預設為瀏覽器的預設語言環境
name
字串設定表單控制項的 `name` 屬性的值
no-border
布林值false如果設為 `true`，會停用預設邊框
precision
數字 或 字串指定小數點後要顯示的位數。預設不定義精度
readonly
布林值false如果設為 `true`，會使評分為唯讀。如果設為 `true`，會允許小數評分值 (會顯示半滿圖示)
show-clear
布林值false如果設為 `true`，會顯示清除值圖示按鈕
show-value
布林值false如果設為 `true`，會顯示控制項中的目前評分值
show-value-max
v2.13.0+ 		布林值false當設定為 `true` 且道具 `show-value` 為 `true` 時，在格式化值中包含最大的星級評價可能值
size
字串設定組建的外觀大小。'sm'、'md'（預設）或 'lg'
stars
數字 或 字串5要顯示的星級數量。最小值為 `3`，預設值為 `5`
value
v-model 		數字 或 字串評分值。這是 v-model
variant
字串套用其中一個 Bootstrap 主題顏色變體到組建

v-model

屬性
事件
valuechange

插槽

名稱
作用範圍
說明
icon-clear 否可用於清除按鈕的內容
icon-empty 可用於空圖示的內容
icon-full 可用於完整圖示的內容
icon-half 可用於半月圖示的內容

事件

事件
參數
說明
change
  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)