Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[rating-bar] add support for custom icon set

Browse source
This commit is contained in:
Laercio Santana 2017-03-23 12:09:15 -03:00
parent 7af48dcee9
commit 35f5a4863b
1 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/mdRatingBar/mdRatingBar.vue
View file

@ -10,9 +10,11 @@
</div>
<div class="md-back-stars" v-else>
<md-icon v-for="i in mdNumStars"
:md-iconset="mdBackIconset"
@mouseover.native="hoverStars"
@click.native="clickStars"
@mouseout.native="onMouseOut">{{ mdBackIcon }}</md-icon>
@mouseout.native="onMouseOut"
v-html="backIcon"></md-icon>
</div>
<div class="md-front-stars" :style="frontStarsStyle" v-if="srcFrontIcon">
@ -25,9 +27,11 @@
</div>
<div class="md-front-stars" :style="frontStarsStyle" v-else>
<md-icon v-for="i in mdNumStars"
:md-iconset="mdFrontIconset"
@mouseover.native="hoverStars"
@click.native="clickStars"
@mouseout.native="onMouseOut">{{ mdFrontIcon }}</md-icon>
@mouseout.native="onMouseOut"
v-html="frontIcon"></md-icon>
</div>
</div>
</template>
@ -53,6 +57,8 @@
},
default: 0
},
mdFrontIconset: String,
mdBackIconset: String,
mdFrontIcon: {
type: String,
default: 'star'
@ -75,6 +81,20 @@
this.srcBackIcon = this.checkSrc(this.mdBackIcon);
},
computed: {
backIcon() {
if (this.mdBackIconset) {
return '';
}
return this.mdBackIcon;
},
frontIcon() {
if (this.mdFrontIconset) {
return '';
}
return this.mdFrontIcon;
},
frontStarsStyle() {
return {
width: 100 * this.rating + '%',