vue实现评价星星功能

下面我将详细讲解“Vue实现评价星星功能”的完整攻略。

一、需求分析

在实现评价星星功能之前，我们需要首先明确需求，即实现一个能够显示、选择和保存星星评分数据的组件。在这个组件中，用户可以看到默认的星星评分，也可以选择一定的星星数量来提交评分数据。

二、界面设计

设计星星评价组件的界面，可以使用普通的HTML和CSS，然后在Vue里面进行引用。

其中，评分界面示例代码如下：

<div class="star-rating">
    <span class="star low"></span>
    <span class="star low"></span>
    <span class="star low"></span>
    <span class="star low"></span>
    <span class="star low"></span>
</div>

这里仅展示了五颗星星，每颗星星是一个span元素，同时设置class为“star，low”，表示星星的状态和颜色。

三、Vue组件开发

接下来，我们需要开始Vue组件的开发，包括组件的逻辑和数据交互，具体代码如下：

<template>
  <div class="star-rating">
    <span
      v-for="star in stars"
      v-bind:class="{active: (star <= savedRating), 'is-animated': temporaryRating === star}"
      v-bind:key="star"
      v-on:mouseover="temporaryRating = star"
      v-on:mouseout="temporaryRating = savedRating"
      v-on:click="savedRating = star">
    </span>
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      stars: [1, 2, 3, 4, 5],
      savedRating: this.rating,
      temporaryRating: null
    }
  }
}
</script>

<style>
.star-rating {
  unicode-bidi: bidi-override;
  color: #c5c5c5;
  font-size: 30px;
  text-shadow: 1px 1px #bbb;
  display: inline-block;
  position: relative;
  letter-spacing: -10px;
}

.star-rating > span {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  text-align: center;
  cursor: pointer;
}

.star-low {
  z-index: 1;
}

.star-high {
  color: #e5e500;
  z-index: 2;
  text-shadow: 1px 1px #c8c800;
}

.active ~ span {
  color: #c8c800;
  text-shadow: 1px 1px #aaa;
}
</style>

在这段代码中，我们首先通过导入Vue，创建了一个名为“star-rating”的组件。在组件中，我们使用了props来给组件传递评分数据，默认值为0。

然后，我们使用data来内部初始化数据，将每颗星星的编号存储在数组中，保存用户的评分数据，以及标记评分状态为高亮。

在模板中，我们使用v-for指令生成每颗星星，v-bind:class绑定每颗星星的样式，v-on指令和事件处理函数实现鼠标移进移出评分操作，并通过v-bind:key跟踪每颗星星的状态。

同时，我们还使用了style，实现了star-rating和.star-low的样式，以及星星高亮时的.active样式。

四、组件使用

最后，在Vue项目中引入这个星星评价组件，并使用props传递评分数据rating即可，示例代码如下：

<template>
  <div>
    <star-rating :rating="4"></star-rating>
  </div>
</template>

<script>
import StarRating from './components/StarRating.vue'

export default {
  name: 'App',
  components: {
    StarRating
  }
}
</script>

在这个示例中，我们import StarRating组件，然后在模板中使用，向StarRating组件传递了评分数据props。

五、通过事件传递评分数据

除了上述方法外，我们还可以通过$emit方法来触发组件内的自定义事件，将评分数据传递给父组件。具体代码如下：

在star-rating组件中的评分处理函数：

methods: {
  setRating(rating) {
    this.savedRating = rating;
    this.$emit('rating-set', this.savedRating);
  }
}

在父组件中使用setRating自定义事件处理函数，以获取评分数据：

<star-rating v-on:rating-set="setRating"></star-rating>

data() {
  return {
    rating: 0
  }
},
methods: {
  setRating(value) {
    this.rating = value;
  }
}

这样，我们就可以实现星星评价功能，同时通过自定义事件向父组件传递评分数据。