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] change v-model range to [0, md-max-rating]

Browse source
This commit is contained in:
Laercio Santana 2017-05-28 15:31:21 -03:00
parent 676537a24f
commit 60148ddbcb
2 changed files with 19 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
docs/src/pages/components/RatingBar.vue
View file

@ -26,7 +26,7 @@
<md-table-row>
<md-table-cell>v-model</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>A required model object to bind the value. The value is limited by range [0, 1].</md-table-cell>
<md-table-cell>A required model object to bind the value. The value is limited by range [0, <code>md-max-rating</code>].</md-table-cell>
</md-table-row>
<md-table-row>
@ -253,20 +253,20 @@
export default {
data() {
return {
rating1: 0.70,
rating2: 0.6,
rating3: 0.2,
rating4: 0.84,
rating5: 0.7,
rating6: 0.5,
rating7: 0.90,
rating8: 0.9,
rating9: 0.18,
rating10: 0.45,
rating11: 0.82,
rating12: 0.5,
rating13: 0.7,
rating14: 0.4
rating1: 5 * 0.70,
rating2: 10 * 0.6,
rating3: 7 * 0.2,
rating4: 7 * 0.84,
rating5: 7 * 0.7,
rating6: 7 * 0.5,
rating7: 5 * 0.90,
rating8: 5 * 0.9,
rating9: 5 * 0.18,
rating10: 5 * 0.45,
rating11: 5 * 0.82,
rating12: 5 * 0.5,
rating13: 5 * 0.7,
rating14: 5 * 0.4
};
}
};

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

@ -56,9 +56,6 @@
disabled: Boolean,
value: {
type: Number,
validator: (value) => {
return value >= 0 && value <= 1;
},
default: 0
},
mdIconSize: {
@ -114,7 +111,7 @@
},
fullIconStyle() {
return {
width: 100 * this.rating + '%',
width: 100 / this.mdMaxRating * this.rating + '%',
'margin-left': -iconSize * this.mdIconSize * this.mdMaxRating + 'px'
};
}
@ -133,15 +130,15 @@
methods: {
hoverStars(evt) {
if (!this.disabled) {
this.rating = this.getIconIndex(evt.currentTarget) / this.mdMaxRating;
this.rating = this.getIconIndex(evt.currentTarget);
}
},
clickStars(evt) {
if (!this.disabled) {
var selected = this.getIconIndex(evt.currentTarget);
this.$emit('input', selected / this.mdMaxRating);
this.$emit('change', selected / this.mdMaxRating);
this.$emit('input', selected);
this.$emit('change', selected);
}
},
getIconIndex(iconSelected) {//iconSelected is a dom element