手搓五角星评分组件，解决Nuxt4中Ant Design Vue样式丢失的无奈之举

前言

在前端开发的世界里，我们常常依赖各种UI框架来快速搭建界面，这些框架就像是一套现成的工具箱，能大大节省我们的开发时间。

Ant Design Vue（antdv）就是这样一个广受欢迎的框架，它提供了丰富且美观的组件，让开发者能够轻松构建出高质量的用户界面。

但就像任何工具一样，它也有自己的局限性。

出现的问题

最近，在使用Nuxt4开发项目时，我遇到了一个棘手的问题：antdv的ARate（评分）组件在服务器端渲染（SSR）时样式丢失了。

事情是这样的，我们的项目基于Nuxt4，一个强大的Vue.js SSR框架。在开发过程中，我们选择了antdv作为UI框架，它丰富的组件库让我们能够快速实现各种功能。

然而，当我们把项目部署到生产环境，开启SSR渲染时，却发现ARate组件的样式出现了问题。星星显示不正常，评分逻辑也出现了混乱。

经过一番排查，我们意识到这是antdv在SSR环境下的一些兼容性问题导致的，经过多方尝试，也逛了对应的github issue，还是没有找到有效的解决方法，为了解决这个问题，我不得不自己动手，写一个五角星评分组件。

其实实现起来也不难，我觉得让Trae试试看，看看能不能经过简单的描述将其创建好，并且功能完好。

先来看看效果

鼠标上移也会出现对应的黄色高亮，然后移开就恢复原来的星数，只有点击才会修改对应的星数，跟我想要的结果是一致的，太强了，Trae

Trae代码分析

Trae是帮我们进行了分析并采用svg来作为五角星图标，可以通过：color来改变颜色

Trae定义的变量，displayRating 用于实时显示（包括悬停），currentRating 用于点击后锁定，这也是帮我们实现鼠标移出移入的方法进行恢复之前的星数的

js 复制代码

const displayRating = ref(props.value)

const currentRating = ref(props.value)

点击更新星数的方法

ts 复制代码

function handleClick(index: number) {
  if (props.disabled)
    return
  const newRating = index + 1
  currentRating.value = newRating
  displayRating.value = newRating
  emit('update:value', newRating) // 更新 v-model
}

鼠标移出移入功能

js 复制代码

function handleMouseOver(index: number) {
  if (props.disabled)
    return
  displayRating.value = index + 1
}

function handleMouseLeave() {
  // 鼠标移出时，恢复显示为点击后锁定的评分
  displayRating.value = currentRating.value
}

总结

所以，当你在开发过程中遇到类似的框架兼容性问题时，可以尝试去修复他，这一过程你会收获很多，如果没法解决也不要害怕"造轮子"，其实组件库实现起来也很简单，实在不行可以把组件库的代码拉下来实现。

虽然这可能会花费更多的时间和精力，但你将收获更多的知识和经验，而且最终你得到的将是一个完全符合你需求的组件。