Vue.js Star Rating Component

A Vue.js component for creating a star rating system, allowing users to rate items or content.

Features

Customizable star rating with a specified number of stars.
Supports both clicking and hover interactions for setting the rating.
Emits the selected rating for parent component communication.
Easily integrate into your Vue.js application.

Usage

Installation

Ensure you have Vue.js installed in your project.
Copy the StarRating.vue component into your project.

Example

<template>
  <div>
    <star-rating v-model="userRating" :max-stars="5" @ratingData="updateRating" />
    <p>Selected rating: {{ userRating }}</p>
  </div>
</template>

<script>
import StarRating from "./StarRating.vue";

export default {
  data() {
    return {
      userRating: 0,
    };
  },
  components: {
    StarRating,
  },
  methods: {
    updateRating(newRating) {
      // Handle the new rating as needed.
      this.userRating = newRating;
    },
  },
};
</script>

Component Code

<template>
  <div class="star-rating">
    <div
      v-for="i in maxStars"
      :key="i"
      @click="setRating(i)"
      @mouseover="hoverRating(i)"
      @mouseleave="resetHover"
      :class="['star', i <= (isHovered ? hoverValue : rating) ? 'filled' : '']"
    >
      ★
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    maxStars: {
      type: Number,
      default: 5,
    },
  },
  setup(props, { emit }) {
    const rating = ref(props.value);
    const isHovered = ref(false);
    const hoverValue = ref(0);

    const setRating = (newRating) => {
      rating.value = newRating;
      emit('ratingData', newRating);
    };

    const hoverRating = (value) => {
      if (isHovered.value) {
        hoverValue.value = value;
      }
    };

    const resetHover = () => {
      hoverValue.value = 0;
    };

    return {
      rating,
      isHovered,
      hoverRating,
      resetHover,
      setRating,
    };
  },
};
</script>

<style scoped>
.star-rating {
  display: inline-block;
}

.star {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  margin: 2px;
  color: rgb(222, 222, 222);
}

.filled {
  color: gold;
}
</style>

Component Explanation

The component consists of a group of stars, each of which can be clicked to set a rating.
Stars change color on hover and remain filled or unfilled based on the selected rating.
Emits the ratingData event to send the selected rating to the parent component.
Supports a maxStars prop for specifying the maximum number of stars.
Utilizes Vue 3 Composition API for state management with ref.

Styling

Stars are styled with a base color of gray and turn gold when filled.
Adjustable font size and cursor styles for user interaction.

Props

value (Number): Represents the current rating.
maxStars (Number): Specifies the maximum number of stars (default: 5).

Events

ratingData: Emits the selected rating to the parent component.

Methods

setRating(newRating): Sets the current rating and emits the ratingData event.
hoverRating(value): Tracks the hovered rating during a hover interaction.
resetHover(): Resets the hover value after the mouse leaves the star.