【Vue3】vue-star-rating で星評価のコンポーネントを作る。

2021年5月30日

よくある星での5段階評価ができるコンポーネント。自分で実装するのは面倒なのでプラグインで実装します。

今回は こちら vue-star-rating を使用しました。一応 Vue3 対応なのですが、一部上手く動かず詰まった点などを紹介します。

こんな感じの星の表示ができます。

インストール

Vue3 系を使っている場合は next バージョンからインストールする必要があるので下記の様に指定してください。

npm install vue-star-rating@next

もしくは

yarn add vue-star-rating@next

main.js

下記の様に main.js でグローバルなコンポーネントとして使える様にします。

import VueStarRating from 'vue-star-rating'

const app = createApp(App)
app.component('star-rating', VueStarRating) 

使用法

下記の様に様々な props を指定することによって見た目や挙動を変化させられます。

            <star-rating
             v-model:rating="star"
             v-bind:increment="0.1"
             v-bind:star-size="20"
             :show-rating="false"
             :read-only="true"
            ></star-rating>

詳しい props 一覧はこちらに載っています。

単純な星だけでなくアニメーションをつけたり色を変えたり様々な星にできます。こちらに例の一覧があります。

問題点

自分も使っていて困った点。

git の issues にも上がっていましたが Vue3 で星がクリックできないという問題。

何故か read-only になっているわけでも無いのに星がクリックできないという事象です。

正しい解決策では無いかもしれませんが、自分は実際に node-modules の中に入っている下記3つのファイル

• AlphaColor.js
• star-rating.vue
• star.vue

こちらを丸々コピーして新たなコンポーネントとして import してみたところ問題なくクリックできる様でした。（その際それぞれのファイル内で AlphaColor.js などを import している部分のパスを新しく入れた場所に書き換えるのを忘れない様に ）

まとめ

なんやかんや今回も Vue3 対応してるけどなんか上手くいかない部分もあった、といった件でした。

ただこのプラグイン自体色々な星を使ってレビューが作れるので使い勝手が良いと思いました。

参考書籍

まだ若干 3 の方は情報が少ない気もするので本を読んで体系的に勉強したいですが Vue 3 対応している日本語の本はこれくらいでしょうか。。？

下記は自分が読んだこともあるので紹介しておきます。