如何用豆包MarsCode 打造简洁高效的星级评分组件？

本文链接：https://blog.csdn.net/DouBaoMarsCode/article/details/142847541

以下是「豆包MarsCode 体验官」优秀文章，作者zhangm。

前言

在现代应用程序中，用户评分功能是非常常见的需求之一。为了满足这一需求，我打算使用豆包MarsCode来封装一个Vue的五星评分组件。该组件将允许用户通过点击星星来评价项目或产品，同时提供了直观的界面和交互体验。

安装豆包MarsCode 并体验

在vscode的扩展栏搜索豆包MarsCode，点击安装并启用

登入用户：

生成代码

豆包MarsCode 允许用户根据自定义的模板快速生成代码片段。这些片段可以是常用的代码结构、模式或者自定义的模板，有助于提高编码效率。
用户可以通过简单的触发词或快捷键来调用这些代码片段，从而快速生成代码块。效果演示

代码补全

豆包MarsCode 基于用户当前的上下文和代码语境，智能地提供代码补全建议。这意味着它不仅仅是简单的文本替换，而是根据代码语法、类型和语义理解，推荐合适的代码片段和方法名。
用户可以通过预定义的快捷键触发代码补全建议。当用户键入代码时，MarsCode 会显示相关的建议列表。通过选择或继续输入，用户可以快速完成代码片段的输入。
豆包MarsCode 允许用户根据自己的偏好和项目需求进行定制。用户可以配置哪些文件类型或语言需要启用代码补全，以及如何显示和过滤建议。
当用户开始键入变量名或方法名时，豆包MarsCode提供与之匹配的建议。这些建议基于当前上下文的已定义变量、函数和类名，帮助用户避免拼写错误和重复输入。
对于需要导入外部模块或库的情况，豆包MarsCode 可能还会推荐相关的导入语句。这使得在大型项目中，添加新模块时能够更加迅速和准确。

解释代码

注释代码

完整代码

<template>
    <!-- 最外层容器 -->
    <div>
        <div>
            <!-- 定义五个点击区域，每个区域对应一个评级 -->
            <span @click="onRatingClick(1)" :class="{ active: rating >= 1 }">
                <!-- 显示一个星星图标 -->
                <i class="iconfont  icon-shixing"></i>
            </span>
            <span @click="onRatingClick(2)" :class="{ active: rating >= 2 }">
                <i class="iconfont  icon-shixing"></i>
            </span>
            <span @click="onRatingClick(3)" :class="{ active: rating >= 3 }">
                <i class="iconfont  icon-shixing"></i>
            </span>
            <span @click="onRatingClick(4)" :class="{ active: rating >= 4 }">
                <i class="iconfont  icon-shixing"></i>
            </span>
            <span @click="onRatingClick(5)" :class="{ active: rating >= 5 }">
                <i class="iconfont  icon-shixing"></i>
            </span>

        </div>
    </div>
</template>

<script>
export default {
    methods: {
        // 点击事件处理函数，当用户点击一个评级时，设置当前的评级值
        onRatingClick(rating) {
            this.rating = rating;
        },
    },
    data() {
        return {
            // 数据属性，用于存储当前的评级值，默认为0
            rating: 0,
        };
    },
};
</script>

<style scoped>
span:hover {
    cursor: pointer;
}

span.active {
    color: yellow;
    font-weight: bold;
    transition: color 0.3s ease, font-weight 0.3s ease;
}
</style>



import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4617787_zix0xg2r3m.css">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

效果图

模板（Template）

整体布局：组件的模板中，最外层是一个 <div> 元素。
内部布局：在这个 <div> 中，有另一个 <div> 用于容纳所有的星星图标和文字。这里我们使用了五个<span>元素来表示五个星星。每个<span>元素都有一个@click事件绑定，当用户点击时，它会调用onRatingClick方法，并传入一个数字参数，表示被点击的星星的等级。同时，每个<span>元素都会根据当前的rating值来应用一个名为active的CSS类，如果rating值大于等于当前<span>所代表的等级，它将会被应用。

样式（Style）

鼠标悬停效果：所有的<span>元素在鼠标悬停时都会显示为手型指针，提示用户可以点击。
激活状态样式：当<span>元素被激活（即用户评级后），它会应用.active类，产生两个效果：颜色变为黄色，并且字体加粗。此外，当样式改变时，颜色和字体粗细会在0.3秒内平滑过渡，使得评级变化看起来更加生动和自然。

脚本（Script）

方法（Methods）：onRatingClick 方法在用户点击星星时更新组件的 rating 数据属性。
数据（Data）：rating 属性初始化默认为 0。

综上所述，这个组件允许用户进行评级操作，并且根据用户的选择实时显示评级结果。通过 @click 事件和 methods 中的 onRatingClick 方法实现了交互功能，而 data 中的 rating 属性则存储了用户的评级状态。样式方面，通过 CSS 的 hover 和 active 类增强了用户体验，使得评级过程更加直观和有趣。