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

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

## 完成したデザイン
![スクリーンショット 2022-12-26 14.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485238/5986b367-efed-89c9-60a5-927222e26fea.png)

## vue-star-ratingとは？
https://github.com/craigh411/vue-star-rating?ref=kabanoki.net

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

## 使用方法
### インストール

Vue 2.x Install

```
npm install vue-star-rating
```

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

```
npm install vue-star-rating@next
```

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

Vue 2.x

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

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


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

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

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

Vue 3.x

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

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

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

![スクリーンショット 2022-12-26 15.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485238/43040439-faea-43de-6938-efb43f2813df.png)


``` vue
<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 &#124; Array | #ffd055 |
| border-color  | 各星の境界線の色を設定します | String | #999 |
| active-border-color  | ハイライトされた星の境界線の色。色の配列を渡して、各星の境界線を個別に色付けします  | String &#124; 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 | '' |