VueJS Bar And Star Rating Component And Demo

VueJS Bar and Star Rating Component and demo

Contents

In this Post We Will Explain About is VueJS Bar and Star Rating Component and demo With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs rating component Example

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



    Example of the Star rating in vue.js demo
    
        
            {{product.name}}: {{product.level}}
            
        
    
    {{webdev | json}}

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: '\
        = 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">\
        ★',

  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;
}

Example
You are Most welcome in my youtube Channel Please subscribe my channel. and give me Feed Back. 
 More Details……

Angularjs Example

Example
I hope you have Got What is Vuejs rating component And how it works.I would Like to have Feed Back From My Blog(Pakainfo.com) readers.Your Valuable Feed Back,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

No related posts.

VueJS Bar and Star Rating Component and demo