当前位置：首页 > VUE

vue实现图标点亮

2026-01-22 12:21:03VUE

实现图标点亮的常见方法

在Vue中实现图标点亮效果通常可以通过动态绑定类名或样式、切换图标组件等方式实现。以下是几种常见方案：

使用动态类名绑定

通过v-bind:class或:class动态切换点亮状态的样式类：

<template>
  <i 
    class="icon" 
    :class="{ 'active': isActive }"
    @click="isActive = !isActive"
  >★</i>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  }
}
</script>

<style>
.icon {
  color: #ccc;
  cursor: pointer;
}
.icon.active {
  color: gold;
}
</style>

使用条件渲染切换图标

当使用图标库（如Font Awesome）时，可以通过条件渲染切换不同状态的图标：

<template>
  <font-awesome-icon 
    :icon="isActive ? 'solid/star' : 'regular/star'" 
    @click="isActive = !isActive"
  />
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

export default {
  components: { FontAwesomeIcon },
  data() {
    return {
      isActive: false
    }
  }
}
</script>

使用计算属性管理图标状态

对于复杂场景，可以使用计算属性返回图标名称或样式：

<template>
  <button @click="toggleLike">
    <i :class="iconClass"></i>
  </button>
</template>

<script>
export default {
  data() {
    return {
      liked: false
    }
  },
  computed: {
    iconClass() {
      return this.liked ? 'fas fa-heart text-red-500' : 'far fa-heart'
    }
  },
  methods: {
    toggleLike() {
      this.liked = !this.liked
    }
  }
}
</script>

使用第三方图标组件库

以Element UI为例实现开关效果：

<template>
  <el-button 
    :icon="isOn ? 'el-icon-star-on' : 'el-icon-star-off'"
    @click="isOn = !isOn"
  />
</template>

<script>
export default {
  data() {
    return {
      isOn: false
    }
  }
}
</script>

动画过渡效果

为点亮状态添加过渡动画：

vue实现图标点亮

<template>
  <transition name="fade">
    <i 
      v-if="isLit" 
      class="fas fa-lightbulb text-yellow-400"
      @click="toggleLight"
    />
    <i 
      v-else 
      class="fas fa-lightbulb text-gray-400"
      @click="toggleLight"
    />
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>