vue实现收藏样式

Vue 实现收藏样式

方法一：使用 Font Awesome 图标

安装 Font Awesome 依赖：

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

在 Vue 组件中引入并使用：

<template>
  <div @click="toggleFavorite">
    <font-awesome-icon :icon="isFavorite ? 'fas fa-star' : 'far fa-star'" />
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faStar } from '@fortawesome/free-solid-svg-icons'
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'

export default {
  components: {
    FontAwesomeIcon
  },
  data() {
    return {
      isFavorite: false,
      fas: {
        faStar
      },
      far: {
        farStar
      }
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
    }
  }
}
</script>

方法二：使用 Unicode 字符

直接使用 HTML 实体符号实现简单收藏样式：

<template>
  <div @click="toggleFavorite" class="favorite">
    {{ isFavorite ? '★' : '☆' }}
  </div>
</template>

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

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

方法三：自定义 SVG 图标

创建可自定义的 SVG 收藏图标：

<template>
  <div @click="toggleFavorite" class="favorite">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path 
        :fill="isFavorite ? 'gold' : 'none'" 
        stroke="gold" 
        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>
  </div>
</template>

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

<style>
.favorite {
  cursor: pointer;
}
</style>

方法四：使用 CSS 动画效果

为收藏添加点击动画效果：

<template>
  <div 
    @click="toggleFavorite" 
    :class="['favorite', { 'active': isFavorite }]"
  >
    <span class="star">★</span>
  </div>
</template>

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

<style>
.favorite {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s;
}

.favorite .star {
  color: #ccc;
  transition: all 0.3s;
}

.favorite.active .star {
  color: gold;
  transform: scale(1.2);
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}
</style>

方法五：结合 Vuex 状态管理

当需要全局管理收藏状态时：

<template>
  <div @click="toggleFavorite">
    <font-awesome-icon :icon="isFavorite(itemId) ? 'fas fa-star' : 'far fa-star'" />
  </div>
</template>

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

export default {
  props: ['itemId'],
  computed: {
    ...mapGetters(['isFavorite'])
  },
  methods: {
    ...mapMutations(['toggleFavorite'])
  }
}
</script>

在 Vuex store 中：

export default new Vuex.Store({
  state: {
    favorites: []
  },
  getters: {
    isFavorite: state => itemId => state.favorites.includes(itemId)
  },
  mutations: {
    toggleFavorite(state, itemId) {
      const index = state.favorites.indexOf(itemId)
      if (index === -1) {
        state.favorites.push(itemId)
      } else {
        state.favorites.splice(index, 1)
      }
    }
  }
})