微信小程序官网_vue2.0完成前端星星评分功用组件

2021-01-08 16:36| 发布者: | 查看: |

vue2.0实现前端星星评分功能组件实例代码     ++   本文通过实例代码给大家介绍了vue2.0实现前端星星评分功能组件,非常不错,具有参考借鉴价值,需要的朋友参考下吧

下面给大家分享vue 2.0实现星星评分组件,代码很简单,一起看看吧!

废话不多说了,直接给大家贴代码了,具体代码如下所示:

 template id="pingJia" 
 div 
 li : v-for="(value,index) in list" span 
{{value.classs.major}} /span 
 span 任课老师:{{value.classs.teacher}} /span 
 div v-for="(item,index1) in value.classs.zh" :id="index" 
 span {{item.title}} /span 
 span :id="index1" 
 span :title="value.classs.title1" /span 
 span :title="value.classs.title1" /span 
 span :title="value.classs.title1" /span 
 span :title="value.classs.title1" /span 
 span :title="value.classs.title1" /span 
 /span 
 span @mousemove="pingjia($event)" :title="value.classs.title1" 
@click="pingjia1($event)" @mouseleave="pingjia2($event)" /span 
 span {{item.lastD}} /span 
 /div 
 /li 
 button @click="pingjia3($event)" 评价 /button 
 /ul 
 /div 
 /template 
 style 
.li1{
width: 1200px;
/*height: 330px;*/
color: #f60;
border: 1px solid #000000;
font-size: 20px;
line-height: 50px;
.bg1{
background: #00A2D4;
.but1{
width: 200px;
height: 40px;
font-size: 25px;
float: right;
margin: 5px 5px;
.stu_span1{
float: left;
margin: 0px 25px;
.stu_teacher{
float: left;
.stu_div{
float: left;
width: 1000px;
height: 50px;
.stu_title{
float: left;
.stu_bgstar{
width: 250px;
height: 50px;
float: left;
margin-left:500px;
/*background: url(../image/star.png);*/
background-size: 50px 50px;
.stu_bgstar1{
width: 50px;
height: 50px;
float: left;
background: url(../image/star.png);
background-size: 50px 50px;
margin-left: 0px;
.stu_bgstar2{
width: 250px;
height: 50px;
float: left;
/*background: url(../image/star.png);*/
/*background-size: 50px 50px;*/
margin-left: -250px;
opacity: 0;
.stu_bgstar3{
background: url(../image/star1.png);
background-size: 50px 50px;
.stu_li_text{
width: 95%;
height: 100px;
border: 1px solid #000000;
resize: none;
 /style 
 script 
 export default{
 data(){
 return{
list:[{classs:{major:"数学",teacher:"郑...0",title1:0,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"语文",teacher:"郑...1",title1:1,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"英语",teacher:"郑...2",title1:2,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...3",title1:3,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...4",title1:4,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0}
],text:"好"}},
{classs:{major:"数学",teacher:"郑...5",title1:5,
zh:[{title:"课堂氛围",d:0,lastD:0},
{title:"老师水平",d:0,lastD:0},{title:"课后布置",d:0,lastD:0} 
],text:"好"}}]
methods:{
pingjia($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
let a = parseInt($event.offsetX/250*100);
let c = parseFloat($event.offsetX/50);
this.list[wei].classs.zh[b].d = Math.ceil(c);
this.list[wei].classs.title1 = a;
for(let i = 0;i i++){
if(i this.list[wei].classs.zh[b].d){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3'); 
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3'); 
if(a==0){
$event.target.previousElementSibling.children[0].classList.remove('stu_bgstar3'); 
pingjia1($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
this.list[wei].classs.zh[b].lastD = this.list[wei].classs.zh[b].d;
pingjia2($event){
let wei = $event.target.parentNode.id;
let b = $event.target.previousElementSibling.id;
for(let i = 0;i i++){
if(i this.list[wei].classs.zh[b].lastD){
$event.target.previousElementSibling.children[i].classList.add('stu_bgstar3'); 
else{
$event.target.previousElementSibling.children[i].classList.remove('stu_bgstar3'); 
pingjia3($event){
console.log(this.list[0].classs.text);
 /script 

总结

以上所述是小编给大家介绍的vue2.0实现前端星星评分功能组件实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部