vue-rate-it のテスト

目的

vue-rate-it をこのページに適用します。

手順

本ページの HTML に以下を記述します(body タグの中)。

<!-- 省略  -->

<div id="app">
    <star-rating></star-rating>
</div>

<!-- 省略  -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-rate-it/dist/cdn/vue-rate-it.min.js"></script>
<script>
new Vue({
  el: "#app",
  components:{
    'star-rating': VueRateIt.StarRating
  }
});
</script>

デモする

以下に vue-rate-it を表示します。

メモ

• vue-rate-it には、<link rel="stylesheet" href="https://unpkg.com/vue-rate-it/dist/cdn/star-rating.min.js"> を記述するようなことが書いてあるが、.js ファイルを rel=stylesheet で使うとエラーになるのではないか？（実際なった）
• vue-rate-it.min.js にはスタイルをあてる処理も入っている。便利。
• サイズはどうやって変える？
• 1つ以上の星をつけた後で、星 0 にしたい場合はどうする？

参考

• vue-rate-it - An extensible rating component for Vue.js