Vue 3: 玩转星级评分组件——让星星“亮”起来！想要给你的应用添加一个闪耀的星级评分组件？想让用户的评价不再单调乏味

想要给你的应用添加一个闪耀的星级评分组件？想让用户的评价不再单调乏味？那你来对地方了！今天，我们将使用 Vue 3 创建一个不仅功能强大的星级评分组件，还能通过多种主题风格让它成为页面的“明星”。

1. 组件概述：点亮你的网站

我们的星级评分组件不仅仅是星星，它是用户评价的魔法师，能够通过简单的鼠标操作预览和选择评分。同时，它还能根据你选择的主题色调亮起五彩斑斓的星星，让你的页面瞬间星光闪烁！

2. 组件结构：星星的舞台

首先，让我们看看组件的 HTML 结构如何把星星舞动起来：

html
复制代码
<template>
    <div :style="fontStyle">
        <div class="rate" @mouseout="mouseOut">
            <span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span>
            <span class="hollow" :style="fontwidth">
                <span @click="onRate(num)" @mouseover="mouseOver(num)" v-for="num in 5" :key="num">★</span>
            </span>
        </div>
    </div>
    <button type="button" @click="onRate(2)">点击</button>
</template>

主要元素：

<div :style="fontStyle"> ：设置星星的颜色样式，让它们在页面上“闪耀”。
<div class="rate" @mouseout="mouseOut"> ：容纳星星的容器，具备“魔法”——当鼠标移出时星星会恢复原始评分。
<span @mouseover="mouseOver(num)" v-for="num in 5" :key="num">☆</span> ：这些空心星星，专门用来让用户预览评分的“星光”。
<span class="hollow" :style="fontwidth"> ：这里藏着实际的评分星星，它们会根据评分的宽度“挤出”显示。
<button type="button" @click="onRate(2)">点击</button> ：这是个“魔法按钮”，点击后给定分数，体验一下星星的魔力！

3. 组件逻辑：星星背后的秘密

在 <script setup> 中，我们将揭开星星的神秘面纱，利用 Vue 3 的 Composition API 来管理组件的状态和逻辑。

javascript
复制代码
<script setup>
import { defineProps, computed, defineEmits, ref } from 'vue';

// 定义组件的 props
let props = defineProps({
    value: Number,
    theme: {
        type: String,
        default: 'orange'
    }
});

// 定义组件的状态
let width = ref(props.value);
let fontwidth = computed(() => `width:${width.value}em;`);

// 主题颜色对象——星星的调色板
let themeObj = {
    orange: '#fa541c',
    blue: '#40a9ff',
    green: '#73d13d',
    black: '#000',
    red: '#f5222d',
    yellow: '#fadb14',
};

// 动态设置星星颜色
const fontStyle = computed(() => `color:${themeObj[props.theme]}`);

// 定义事件 emit
let emits = defineEmits(["update-rate"]);

// 处理评分点击事件
const onRate = (num) => {
    emits('update-rate', num);
}

// 处理鼠标悬停事件
function mouseOver(i) {
    width.value = i;
}

// 处理鼠标移出事件
function mouseOut() {
    width.value = props.value;
}
</script>

逻辑要点：

defineProps：定义组件的属性，让你可以根据用户的选择调整评分和主题。
ref 和 computed：这些是 Vue 的魔法工具，帮助我们动态调整星星的宽度和颜色，让你的组件不仅能响应用户的操作，还能根据主题变换炫酷的颜色。
defineEmits：定义事件，让组件可以向外发射评分的“星光”。

4. 样式定义：星星的打扮

最后，让我们来看看样式部分如何让星星看起来更加迷人：

css
复制代码
<style lang="css" scoped>
.rate {
    position: relative;
    display: block;
}

.rate > span {
    letter-spacing: 3px;
}

.rate > span.hollow {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden; 
}
</style>

样式亮点：

.rate：设置星星容器的位置，让星星可以在页面上自由舞动。
.rate > span：调整星星的字母间距，让它们看起来不那么拥挤。
.rate > span.hollow：确保空心星星和实心星星完美对齐，根据评分动态调整宽度，呈现出评分的“星光”。

5. 总结：让你的应用熠熠生辉

通过这篇文章，我们不仅实现了一个功能强大的星级评分组件，还给它装上了多彩的“外衣”。用户可以在不同的主题下看到五彩斑斓的星星，并通过简单的操作实现评分。希望这篇文章能够帮助你在 Vue 3 的世界里探索更多的可能性，让你的应用星光熠熠，闪耀迷人！