text Vue.js的星星组件

Posted 2021-04-30

<template>
    <span>
        <slot name="ratio"></slot>
        <i class="fa fa-star" aria-hidden="true" v-for="(i, index) in completeStarts()" :key="index"></i>
        <i class="fa fa-star-half-o" aria-hidden="true" v-if="haveHalfStart()"></i>
        <i class="fa fa-star-o" aria-hidden="true" v-for="(x, index) in incompleteStarts()" :key="index + 5"></i>
        <slot></slot>
    </span>
</template>

<script>
  export default {
    name: 'stars',
    props: ['rating','color','spacing','size'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
        completeStarts: function () {
            if (this.rating > 0) {
              return Math.floor(this.rating)
            }
            return 0
        },
        haveHalfStart: function () {
            return (this.rating % 1) > 0
        },
        incompleteStarts: function () {
            if (this.rating > 0) {
              return 5 - Math.ceil(this.rating)
            }
            return 5
        },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>