2.5.0 • Published 2 years ago
vue-rate v2.5.0
Vue Rate
Rate component for Vue - Demo. Note: This version for Vue 3. If you want to use for Vue 2.x, please see.
Installation and usage
Once, install rate component for your project
npm install vue-rate@next --save
// or yarn add vue-rate@next
Import Vue Rate into your app
import { createApp } from 'vue'
import rate from 'vue-rate'
import 'vue-rate/dist/vue-rate.css'
createApp(App)
.use(rate)
.mount('#app')
Use HTML template
<rate :length="5" />
Options from props
length {number}
: Star size
<rate :length="5" />
value {number}
: Default value
<rate :length="5" :value="2" />
showcount {boolean}
: Shows rate number when mouseover the star.
<rate :length="5" :value="2" :showcount="true" />
ratedesc {object}
: Rate star description array.
<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />
disabled {boolean}
: Disable rate.
<rate :length="5" :value="2" :disabled="true" />
readonly {boolean}
: Read-only rate.
<rate :length="5" :value="2" :readonly="true" />
iconref {string}
: ID of symbol icon
Insert symbol icon into your codebase
<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
<path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</symbol>
Then add Rate component. iconref
must be symbol's id
<rate :length="5" iconref="icon-heart" />
v-model
export default {
data: {
return () { myRate: 0 }
}
}
or setup()
in Option API
import { ref } from 'vue';
export default {
setup () {
const myRate = ref(0);
return { myRate }
}
}
or Composition API with <script setup>
<script setup>
import { ref } from 'vue';
const myRate = ref(0);
}
<script>
And bind to component
<rate :length="5" v-model="myRate" />
Events
<script setup>
function onBeforeRate (rate) {
alert(rate)
}
function onAfterRate (rate) {
alert(rate)
}
</script>
<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />
Development
- Fork the project
- Install all dependencies
- Make your changes on
src/Rate.vue
- Build the package
npm run build
# or yarn build
- Commit and create PR
License
MIT.
3.1.1
2 years ago
2.5.0
2 years ago
3.1.0
2 years ago
3.0.0
2 years ago
2.4.1
2 years ago
2.4.0
4 years ago
2.3.0
4 years ago
2.2.0
6 years ago
2.1.0
6 years ago
2.0.0
6 years ago
1.4.1
7 years ago
1.4.0
7 years ago
1.3.1
7 years ago
1.3.0
7 years ago
1.2.0
7 years ago
1.1.9
7 years ago
1.1.8
7 years ago
1.1.7
7 years ago
1.1.6
7 years ago
1.1.5
7 years ago
1.1.4
7 years ago
1.1.3
7 years ago
1.1.2
7 years ago
1.1.1
7 years ago
1.1.0
7 years ago
1.0.1
7 years ago