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

[rating-bar] add support to custom size by md-icon

Browse source
This commit is contained in:
Laercio Santana 2017-03-23 12:24:47 -03:00
parent 35f5a4863b
commit ff99720b56
1 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,7 @@
@click.native="clickStars"
@mouseout.native="onMouseOut"
:md-src="srcBackIcon"
:class="[iconClasses]"
v-if="srcBackIcon"></md-icon>
</div>
<div class="md-back-stars" v-else>
@ -14,6 +15,7 @@
@mouseover.native="hoverStars"
@click.native="clickStars"
@mouseout.native="onMouseOut"
:class="[iconClasses]"
v-html="backIcon"></md-icon>
</div>
@ -23,6 +25,7 @@
@click.native="clickStars"
@mouseout.native="onMouseOut"
:md-src="srcFrontIcon"
:class="[iconClasses]"
v-if="srcFrontIcon"></md-icon>
</div>
<div class="md-front-stars" :style="frontStarsStyle" v-else>
@ -31,6 +34,7 @@
@mouseover.native="hoverStars"
@click.native="clickStars"
@mouseout.native="onMouseOut"
:class="[iconClasses]"
v-html="frontIcon"></md-icon>
</div>
</div>
@ -57,6 +61,10 @@
},
default: 0
},
mdSize: {
type: Number,
default: 1
},
mdFrontIconset: String,
mdBackIconset: String,
mdFrontIcon: {
@ -95,10 +103,19 @@
return this.mdFrontIcon;
},
iconClasses() {
let classes = {};
if (this.mdSize) {
classes[`md-size-${this.mdSize}x`] = true;
}
return classes;
},
frontStarsStyle() {
return {
width: 100 * this.rating + '%',
'margin-left': -iconSize * this.mdNumStars + 'px'
'margin-left': -iconSize * this.mdSize * this.mdNumStars + 'px'
};
}
},