Vue.jsで評価の星のやつ作る


# [<font color="#333">1.完成イメージ</font>](#-1.完成イメージ)
こんな感じで評価を5段階で付けることができるイメージです。
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920917/95d550cd-be31-ce34-59ff-d15ccbf752d6.gif)



# [<font color="#333">「vue-star-rating」をインストール</font>](#-1.完成イメージ)
vue-star-ratingは星の色やサイズ、評価の刻み（0.1刻みや0.5刻みも出来る）を簡単に設定できる***星評価コンポーネント***です。
```
npm install vue-star-rating
```
CDNで良いならこっち
```
<script src="https://unpkg.com/vue-star-rating/dist/star-rating.min.js"></script>
```

Vue.jsと星評価コンポーネントをインポート
```app.js
window.Vue = require('vue');

import StarRating from 'vue-star-rating';
import Vue from 'vue';

Vue.component('star-rating', StarRating);
Vue.component('my-component', require('./components/app.vue').default);

const stars = new Vue({
    el: '#app',
    
});
```

```app.vue
<template>
<!-- 評価を登録するときの星コンポーネント -->
  <div>
    <star-rating
      @rating-selected ="setRating"
      v-bind:increment="1"
      v-bind:max-rating="5"
      inactive-color="#000"
      active-color="rgb(211, 247, 10)"
      v-bind:star-size="50"
      :show-rating="false"
      :rating="this.score"
    ></star-rating>
   
    //このinputに評価の値を入れる
    <input type="hidden" name="score" :value="this.rating" />
  </div>
</template>

<script>
export default {
  props: [],
  data: function () {
    return {
      rating: 0,
    };
  },
  //星を押すとそのスコアがscoreinputに入る
  methods: {
    setRating: function (rating) {
      this.rating = rating;
    },
   
  },
 
 
};
</script>
```

| 　　　　prop　　　　　 |　　　　　　　　　　　　　内容|   初期値    |
|:-----------------|:------------------|:------------------:|
| increament             | 評価の刻み。0.5なら星が半分づつ増える。 |        1        |
| rating           |            評価の初期値。DBのデータを反映させたい時はこれに設定。 |       0       |
| max-rating             |星の最大個数。 |        will        |
| read-only               | trueなら読み取り専用。出力だけしたい時はtrue |         false         |
| show-rating             | 星の横の数字 |       true       |



| 　　　　スタイル　　　　　 |　　　　　　　　　　　　　　　内容|   初期値    |
|:-----------------|:------------------|:------------------:|
| star-size             | 星の大きさ。数字が大きければ星も大きくなる |        50        |
| inactive-color           | 塗り潰される前の星の色 |       #d8d8d8       |
| active-color             |塗り潰した星の色 |        #ffd055        |
| border-color              |  星の境界線の色 | #999|
| border-width             |境界線の幅| 0 |
|rounded-corners|星の角を丸くするかどうか| false|
|inline| 星評価を設定してinlineで設定| false|
|glow| なんか星の周りにぼんやり輝き。ない方がシンプルで良さげ| 0|
|glow-color| 上記ぼんやりの色| #000|
|text-class| 特定の星評価コンポーネントの評価テキストをスタイルするCSSクラス名| ""|

ただ出力したいだけなら「:rating」にbladeテンプレートからpropsで渡ってきた値を入れてあげればOK。
あとは「:read-only」をtrueにするのも忘れずに。
```app.vue
<template>
  <div>
    <star-rating
  
      v-bind:increment=".1"
      v-bind:max-rating="5"
      :rating="this.score"
      inactive-color="#000"
      active-color="rgb(211, 247, 10)"
      v-bind:star-size="20"
      :show-rating="true"
      :read-only="true"
      :fixed-points="1"
      class="c-card__star"
    ></star-rating>
  </div>
</template>

<script>
export default {
  props: ["score"],
  data: function () {
    return {
      rating: 0,
    };
  },
 
};
</script>
```

こんな感じで表示させるだけで編集はさせない
![スクリーンショット (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920917/b25c387b-b8cb-ef8a-0fe3-e279f7dc3ff8.png)
# [<font color="#333">参考</font>](#-参考)
https://www.kabanoki.net/4632/