savoygu / vue-star-plus

升级版 vue-star

vue-star-plus

Feature	vue-star	vue-star-plus
Icon	✅	✅
Animation	✅	✅
Image	❌	✅
Default Active	❌	✅

Install

Vue3

npm install vue-star-plus

import { createApp } from 'vue'
import VueStarPlus from 'vue-star-plus'
import 'vue-star-plus/style.css'
const app = createApp()
// Global register
app.component('VueStarPlus', VueStarPlus)

Vue2

npm install vue-star-plus@2

import Vue from 'vue'
import VueStarPlus from 'vue-star-plus' // same with vue3 version
import 'vue-star-plus/style.css'  // same with vue3 version
// Global register
Vue.component('VueStarPlus', VueStarPlus)

Usage

DEMO

Basic Usage

<template>
  <VueStarPlus v-model="active" color="#ff0000">
    <template #icon>❤</template>
  </VueStarPlus>
</template>

<script setup>
const active = ref(false)
</script>

Background Image

<template>
  <VueStarPlus v-model="active" color="#ff0000">
    <template #icon>
      <span class="vsp__bgi" :class="{ 'is-active' : active }" />
    </template>
  </VueStarPlus>
</template>

<script setup>
const active = ref(false)
</script>

<style scoped>
.vsp__bgi {
  display: block;
  width: 36px;
  height: 36px;
  background: url("/src/assets/inactive.png") no-repeat;
  background-size: contain;
}
.vsp__bgi.is-active {
  background-image: url("/src/assets/active.png");
}
</style>

Animated

<template>
  <VueStarPlus v-model="active"
    color="#ff0000"
    :animated="['animate__animated', 'animate__tada']">
    <template #icon>❤</template>
  </VueStarPlus>
</template>

<script setup>
const active = ref(false)
</script>

<style scoped>
@import 'animate.css';
</style>

License

The vue-star-plus package is also open-sourced software licensed under the MIT license.