Vue.jsで星評価を表示する！vue-star-ratingの使い方

vue.jsで星評価の表示がしたい！

複数ECサイトの一括検索を行うアプリケーションにて、商品ごとの評価を星で表示したいと思い、vue-star-ratingを使用しました。アプリケーションに関してはこちらにて紹介しています→https://qiita.com/pezio/items/6a01628aa0098327547f

完成したデザイン

vue-star-ratingとは？

星評価を高度にカスタマイズ可能なvue.jsのコンポーネントです。

使用方法

インストール

Vue 2.x Install

npm install vue-star-rating

Vue3系の場合はnextバージョンからインストールする必要があるので下記の様に指定します。

npm install vue-star-rating@next

CDNを使う場合は下記のように指定してください。

Vue 2.x

<script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>`

Vue 3.x

<script src="https://unpkg.com/vue-star-rating@next/dist/VueStarRating.umd.min.js"></script>

import

インストールができたらcomponentを作成します。

import StarRating from 'vue-star-rating'

Vue.component('star-rating', StarRating);

let app = new Vue({
  el: '#app',
  data: {
    rating: 0
  }
});

上記設定をしてあげることで<star-rating />のマークアップで呼び出せるようになります。

CDNで使用する場合はコンポーネントを下記のように登録してあげる必要があります。

Vue 2.x

Vue.component('star-rating', VueStarRating.default);

Vue 3.x

const app = Vue.createApp({ 
  // Your component code
 })
app.component('star-rating', VueStarRating.default)
app.mount('#app')

表示したい箇所でコンポーネントを挿入

サンプルで載せた画面では下記のようにオプションを設定しています。
評価数を表示するオプションはないため、自分で付け加えています。

<star-rating 
    :increment="0.01"
    :rating="item.reviewAverage"→実際に評価に表示させたい値を入れてください
    :read-only="true"
    v-bind:star-size="18"
    :show-rating="false"
    :inline="true"
></star-rating>
<span>({{ item.reviewCount }})</span>

オプション

オプションに関して一応和訳したものを載せますが、詳細はgithubで見てみてください。

Prop	Description	Type	Default
increment	評価の増分の単位が設定できる。例えば、ハーフスターの場合は 0.5、フルスターの場合は 0.01を渡します。0.01 ～ 1 の数値が必要です。	Number	1
rating	最初の評価、これは自動的に最も近い増分に丸められるため、最も正確な評価を得るには、増分として 0.01 を渡すか、round-start-ratingprop を false に設定します	Number	0
max-rating	最大評価。vue-star-rating表示する星の数がわかります	Number	5
star-points	カスタムの星形を定義するポイント。
ポイントが渡されない場合、デフォルトの星形が使用されます。	Array	[]
read-only	true に設定すると、評価を編集できません。と組み合わせて使用​​しincrementて、丸め精度を定義します。	Boolean	false
show-rating	星の横に評価を表示するかどうか	Boolean	true
fixed-points	小数点以下固定桁数で指定します。	null
rtl	rtl (右から左) を使用して星評価を表示するには、true を渡します。	Boolean	false
round-start-rating	P開始評価値を最も近い増分に丸めたくない場合は、false を渡します。ユーザーは、指定された増分に基づいて選択することしかできません。	Boolean	true
clearable	true に設定すると、同じ評価を 2 回クリックすると評価がクリアされます	Boolean	false
active-on-click	true に設定すると、マウスオーバーではなく、ユーザーが星をクリックしたときにのみアクティブな色が適用されます。	Boolean	false

スタイルオプション

Prop	Description	Type	Default
star-size	各星のサイズ。これはSVG幅属性に渡されるため、数値が大きいほど星が大きくなります。	Number	50
inactive-color	星のハイライトされていない部分の色。	String	#d8d8d8
active-color	星のハイライト部分の色。色の配列を渡して、各星を個別に色付けします	String | Array	#ffd055
border-color	各星の境界線の色を設定します	String	#999
active-border-color	ハイライトされた星の境界線の色。色の配列を渡して、各星の境界線を個別に色付けします	String | Array	null
border-width	各星の境界線の幅を設定します	Number	0
animate	マウスオーバー時にアニメーションを適用するには true に設定します	Boolean	false
padding	星間の距離を変更できるように、各星の右側をパディングします	Number	0
rounded-corners	星の角を丸くするかどうか	Boolean	false
inline	星の評価をインラインで表示するように設定します	Boolean	false
glow	アクティブな各星の周りに微妙な輝きを追加します。	Number	0
glow-color	グローの色を設定します	String	#fff
text-class	特定の星評価コンポーネントの評価テキストをスタイルする css クラス名	String	''