用vue写一个评分组件 并实现click mouseover mouseleave 功能

以下是一个简单的评分组件，使用Vue实现了click、mouseover和mouseleave功能：

<template>
  <div class="rating">
    <span v-for="(star, index) in stars"
          :class="{ 'filled': index < rating }"
          @click="selectRating(index + 1)"
          @mouseover="hoverRating(index + 1)"
          @mouseleave="resetRating()">
      <i class="fa fa-star"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: 'Rating',
  data() {
    return {
      rating: 0,
      stars: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    selectRating(rating) {
      this.rating = rating
    },
    hoverRating(rating) {
      this.rating = rating
    },
    resetRating() {
      if (this.rating === 0) {
        return
      }
      this.rating = 0
    }
  }
}
</script>

<style>
.rating {
  display: inline-block;
  font-size: 1.5rem;
}

.fa-star {
  color: #ccc;
  cursor: pointer;
}

.filled {
  color: #ff9800;
}
</style>

在上面的代码中，我们使用了一个stars数组来表示五颗星星。在模板中，我们使用了v-for指令来循环这个数组，并为每个星星添加了一个click、mouseover和mouseleave事件监听器。

我们还定义了三个方法：selectRating、hoverRating和resetRating。selectRating方法用于在用户点击星星时设置评分，hoverRating方法用于在用户将鼠标移动到星星上时实时更新评分，resetRating方法用于在用户将鼠标移出星星时重置评分。

最后，我们还定义了一些样式来美化评分组件。在样式中，我们使用了FontAwesome图标库中的fa-star图标来表示星星。我们还使用了CSS伪类选择器来为已选中的星星添加填充颜色。