当前位置：首页 > VUE

vue实现收藏样式

2026-03-28 12:51:22VUE

实现收藏样式的基本思路

在Vue中实现收藏功能通常需要结合图标切换和状态管理。通过点击事件切换收藏状态，同时更新UI样式。

使用Font Awesome图标库

安装Font Awesome依赖：

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

在组件中引入并设置：

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faHeart as solidHeart } from '@fortawesome/free-solid-svg-icons'
import { faHeart as regularHeart } from '@fortawesome/free-regular-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  data() {
    return {
      isFavorited: false,
      solidHeart,
      regularHeart
    }
  }
}

模板中使用动态图标：

<font-awesome-icon 
  :icon="isFavorited ? solidHeart : regularHeart" 
  @click="isFavorited = !isFavorited"
  class="favorite-icon"
  :class="{ 'active': isFavorited }"
/>

使用Element UI的图标

安装Element UI：

vue实现收藏样式

npm install element-ui

在main.js中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

组件中使用：

<el-button 
  :icon="isFavorited ? 'el-icon-star-on' : 'el-icon-star-off'" 
  @click="toggleFavorite"
  :class="{ 'favorited': isFavorited }"
></el-button>

自定义CSS样式

添加过渡效果和颜色变化：

vue实现收藏样式

.favorite-icon {
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.favorite-icon:hover {
  transform: scale(1.1);
}

.favorite-icon.active {
  color: #ff4d4f;
}

.el-button.favorited {
  color: #ff4d4f;
}

结合Vuex管理状态

对于全局收藏状态，可以使用Vuex：

// store.js
export default new Vuex.Store({
  state: {
    favorites: []
  },
  mutations: {
    TOGGLE_FAVORITE(state, itemId) {
      const index = state.favorites.indexOf(itemId)
      if (index === -1) {
        state.favorites.push(itemId)
      } else {
        state.favorites.splice(index, 1)
      }
    }
  }
})

组件中使用：

<template>
  <div @click="toggleFavorite(item.id)">
    <i :class="['icon', isFavorited(item.id) ? 'active' : '']"></i>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFavorite(id) {
      this.$store.commit('TOGGLE_FAVORITE', id)
    },
    isFavorited(id) {
      return this.$store.state.favorites.includes(id)
    }
  }
}
</script>

动画效果实现

使用Vue的transition组件实现点击动画：

<transition name="bounce">
  <i 
    v-if="isFavorited"
    class="fas fa-heart"
    @click="toggleFavorite"
    style="color: red;"
  ></i>
  <i 
    v-else
    class="far fa-heart"
    @click="toggleFavorite"
  ></i>
</transition>

添加CSS动画：

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}