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

1. Ensure you have Vue.js installed in your project.
2. 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.

Author

Created by Tahsin Abrar