vue实现笑脸评价

实现笑脸评价组件

在Vue中实现笑脸评价功能，可以通过自定义组件结合CSS动画和交互逻辑完成。以下是具体实现方法：

安装必要依赖 需要安装@fortawesome/vue-fontawesome和@fortawesome/free-solid-svg-icons来使用Font Awesome的笑脸图标：

npm install @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons

创建SmileyRating组件

<template>
  <div class="smiley-rating">
    <div 
      v-for="(smiley, index) in smileys" 
      :key="index"
      @click="selectRating(index)"
      @mouseover="hoverRating = index"
      @mouseleave="hoverRating = null"
      :class="{ 
        'active': selectedRating === index,
        'hover': hoverRating === index
      }"
    >
      <font-awesome-icon 
        :icon="smiley.icon" 
        :class="`smiley-${index}`" 
      />
    </div>
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { 
  faFrown, 
  faMeh, 
  faSmile, 
  faLaughSquint,
  faGrinHearts
} from '@fortawesome/free-solid-svg-icons'

export default {
  components: { FontAwesomeIcon },
  data() {
    return {
      selectedRating: null,
      hoverRating: null,
      smileys: [
        { icon: faFrown, label: '非常不满意' },
        { icon: faMeh, label: '不满意' },
        { icon: faSmile, label: '一般' },
        { icon: faLaughSquint, label: '满意' },
        { icon: faGrinHearts, label: '非常满意' }
      ]
    }
  },
  methods: {
    selectRating(index) {
      this.selectedRating = index
      this.$emit('rating-selected', index + 1)
    }
  }
}
</script>

<style scoped>
.smiley-rating {
  display: flex;
  justify-content: space-around;
  font-size: 2rem;
  cursor: pointer;
}

.smiley-rating > div {
  transition: all 0.3s ease;
  transform: scale(1);
}

.smiley-rating > div:hover,
.smiley-rating > div.hover {
  transform: scale(1.2);
}

.smiley-rating > div.active {
  transform: scale(1.3);
  filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
}

.smiley-0 { color: #ff6b6b; }
.smiley-1 { color: #ffb347; }
.smiley-2 { color: #f5e050; }
.smiley-3 { color: #7bed9f; }
.smiley-4 { color: #70a1ff; }
</style>

使用组件示例

在父组件中引入并使用：

<template>
  <div>
    <h3>请评价我们的服务</h3>
    <SmileyRating @rating-selected="handleRating" />
    <p v-if="rating">您选择了: {{ ratingText }}</p>
  </div>
</template>

<script>
import SmileyRating from './SmileyRating.vue'

export default {
  components: { SmileyRating },
  data() {
    return {
      rating: null,
      ratingTexts: [
        '非常不满意',
        '不满意',
        '一般',
        '满意',
        '非常满意'
      ]
    }
  },
  methods: {
    handleRating(rating) {
      this.rating = rating
      this.ratingText = this.ratingTexts[rating - 1]
    }
  }
}
</script>

自定义选项

可以根据需求调整以下参数：

• 修改smileys数组中的图标和标签
• 调整CSS中的颜色和动画效果
• 改变评分数量（增减数组元素）
• 添加工具提示显示每个笑脸的含义

动画增强效果

如需更生动的动画效果，可以添加CSS关键帧动画：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.smiley-rating > div.active {
  animation: bounce 0.5s ease;
}

无障碍访问优化

为提升无障碍体验，可以添加ARIA属性：

<div 
  role="button"
  :aria-label="smiley.label"
  tabindex="0"
  @keydown.enter="selectRating(index)"
>
  <!-- 图标内容 -->
</div>

以上实现方案提供了完整的笑脸评分组件，包含交互反馈和视觉动画效果，可根据实际项目需求进行调整。