插件名称 | awesome-vue-star-rating |
---|---|
发布时间 | 2021年4月29日 |
插件作者 | Jebasuthan |
使用Pure Vue应用程序,无需任何外部程序包,即可轻松实现可定制的Awesome Vue Star Rating。
npm install --save awesome-vue-star-rating
步骤1:在我们的组件中导入AwesomeVueStarRating
import AwesomeVueStarRating from 'awesome-vue-star-rating'
export default {
name: 'app',
components: {
AwesomeVueStarRating
}
}
</script>
步骤2:将默认值加载到组件
data() {
return {
star: 5, // default star
ratingdescription: [
{
text: 'Poor',
class: 'star-poor'
},
{
text: 'Below Average',
class: 'star-belowAverage'
},
{
text: 'Average',
class: 'star-average'
},
{
text: 'Good',
class: 'star-good'
},
{
text: 'Excellent',
class: 'star-excellent'
}
],
hasresults: true,
hasdescription: true,
starsize: 'lg', //[xs,lg,1x,2x,3x,4x,5x,6x,7x,8x,9x,10x],
maxstars: 5,
disabled: false
}
}
步骤3:将Rate组件放置在模板中
<template>
<div id="app">
<AwesomeVueStarRating :star="this.star" :disabled="this.disabled" :maxstars="this.maxstars" :starsize="this.starsize" :hasresults="this.hasresults" :hasdescription="this.hasdescription" :ratingdescription="this.ratingdescription" />
</div>
</template>
第4步:自定义星形颜色样式,如下所示
<style lang="scss">
.star {
color: red;
}
.star.active {
color: red;
}
.list, .list.disabled {
&:hover {
.star {
color: red !important;
}
.star.active {
color: red;
}
}
}
</style>
编译和热重装以进行开发
npm run serve