Vue vue-star-rating

by kabanoki

HTML

<div id="app">
  <h2>basic</h2>
  <star-rating v-model="rating"></star-rating>
  <h2>Half Stars</h2>
  <star-rating :increment="0.5"></star-rating>
  <h2>Small Stars</h2>
  <star-rating :star-size="20"></star-rating>
  <h2>Big Stars</h2>
  <star-rating :star-size="90"></star-rating>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/star-rating.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}



h2 {
  font-weight: bold;
  margin-top: 20px;
}

Vue

const StarRating = window.VueStarRating.default;

Vue.component('star-rating', StarRating);
let app = new Vue({
  el: '#app',
  data: {
    rating: 0
  }
});