当前位置：首页 > VUE

vue实现收藏样式

2026-01-08 13:39:45VUE

vue实现收藏样式

使用图标库实现收藏样式

安装图标库如font-awesome或element-ui的图标组件，通过v-bind动态绑定类名或样式实现收藏与未收藏状态切换。

<template>
  <i 
    class="icon" 
    :class="isCollected ? 'fas fa-star' : 'far fa-star'" 
    @click="toggleCollect"
  ></i>
</template>

<script>
export default {
  data() {
    return {
      isCollected: false
    }
  },
  methods: {
    toggleCollect() {
      this.isCollected = !this.isCollected
    }
  }
}
</script>

<style>
.icon {
  color: gold;
  cursor: pointer;
  font-size: 24px;
}
</style>

使用CSS自定义样式

通过动态类名结合CSS实现自定义收藏样式，利用transform和transition添加动画效果。

<template>
  <div 
    class="collect-btn" 
    :class="{ 'collected': isCollected }" 
    @click="toggleCollect"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      isCollected: false
    }
  },
  methods: {
    toggleCollect() {
      this.isCollected = !this.isCollected
    }
  }
}
</script>

<style>
.collect-btn {
  width: 30px;
  height: 30px;
  background: url('uncollected-icon.png');
  cursor: pointer;
  transition: transform 0.3s;
}

.collect-btn.collected {
  background: url('collected-icon.png');
  transform: scale(1.2);
}
</style>

使用SVG实现动态填充

通过SVG路径和动态绑定fill属性，实现更灵活的收藏样式控制。

<template>
  <svg 
    width="24" 
    height="24" 
    viewBox="0 0 24 24" 
    @click="toggleCollect"
  >
    <path 
      :fill="isCollected ? 'gold' : 'none'" 
      stroke="gray" 
      stroke-width="1.5"
      d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
    />
  </svg>
</template>

<script>
export default {
  data() {
    return {
      isCollected: false
    }
  },
  methods: {
    toggleCollect() {
      this.isCollected = !this.isCollected
    }
  }
}
</script>

结合Vuex管理收藏状态

在大型应用中，通过Vuex集中管理收藏状态，实现跨组件状态同步。

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

<template>
  <button @click="toggleCollect(item.id)">
    {{ isCollected ? '已收藏' : '收藏' }}
  </button>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  props: ['item'],
  computed: {
    ...mapState(['collectedItems']),
    isCollected() {
      return this.collectedItems.includes(this.item.id)
    }
  },
  methods: {
    ...mapMutations(['toggleCollect'])
  }
}
</script>

添加收藏动画效果

通过Vue的transition组件或CSS动画库（如animate.css）增强交互体验。

<template>
  <transition name="bounce">
    <i 
      v-if="showIcon" 
      class="fas fa-heart" 
      :class="{ 'text-red-500': isCollected }"
      @click="handleCollect"
    ></i>
  </transition>
</template>

<style>
.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.5); }
  100% { transform: scale(1); }
}
</style>

vue实现收藏样式