Morioh
Login
Hudson Kunde

Hudson Kunde

1 year ago

Vue.js Bar and Star Rating Component

In this post we will show you Best way to implement VueJS Bar Rating Component and demo, hear for star rating Vuejs examples free download with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Include External Libs

 

index.html

<!-- Devloped by Pakainfo.com free download examples -->
<div id="liveApp">
<h1>Example of the Star rating in vue.js demo</h1>
<ul>
<li>
<p>{{product.name}}: {{product.level}}</p>

</li>
</ul>
<pre>{{webdev | json}}</pre>
</div>

index.js

// Devloped by Pakainfo.com free download examples -->
Vue.component('live-star-rating', {
props: {
'name': String, //Datatype string
'value': null,
'real_val': null,
'id': String, //Datatype string
'disabled': Boolean,//true or false
'required': Boolean //true or false
},
template: '<div class="live-star-rating">\
<label class="live-star-rating__star">= rating) && value != null), \'is-hover\': ((real_val >= rating) && real_val != null), \'is-disabled\': disabled}" \
v-on:click="set(rating)" v-on:mouseover="star_over(rating)" v-on:mouseout="star_out">\
ā˜…</label></div>',

data: function() {
return {
temp_value: null,
liveAllRates: [1, 2, 3, 4, 5]
};
},
methods: {
star_over: function(index) {
var self = this;

if (!this.disabled) {
this.temp_value = this.real_val;
return this.real_val = index;
}

},

star_out: function() {
var self = this;

if (!this.disabled) {
return this.real_val = this.temp_value;
}
},
//set value
set: function(value) {
var self = this;
//check value
if (!this.disabled) {
this.temp_value = value;
return this.value = value;
}
}
}

});

new Vue({
el: '#liveApp',
data: {
webdev: [
{name: "Live24u", level: 4},
{name: "Vuejs", level: 3}
]
}
});

style.css

.live-star-rating__star.is-selected,
.live-star-rating__star.is-hover {
color: #FFD700;
}
.live-star-rating__star.is-disabled:hover {
cursor: default;
}
pre{
background: #1d1d1d;
border: 2px solid #3d3d3d;
padding: 18px;
border-radius: 3px;
}
.live-star-rating__star {
display: inline-block;
line-height: 1;
font-size: 1.5em;
color: #ABABAB;
padding: 3px;
vertical-align: middle;
transition: color .2s ease-out;
}
.live-star-rating__checkbox {
position: absolute;
height: 2px;
width: 2px;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -2px;
padding: 0;
border: 0;
}
.live-star-rating__star:hover {
cursor: pointer;
}

I hope you have Got What is Vuejs rating component And how it works.

#vue #vuejs 

Vue.js Bar and Star Rating Component
1.00 GEEK